How to load data on app start from file with Flutter and sqflite? - flutter

Question

I have a whole list of data I want to load into my app when it starts up. I was able to extract into a JSON file so I can load it into my table, but it's not quite loading correctly and also seems to get added multiple times. It looks like I am loading in the file correctly via assets (printing the values in _loadIngredients gives me the right results). But when it is saved into the DB, it just gets saved as an integer and that is what shows up in the view.
I could not find a good example of this anywhere.
Where am I going wrong?
In my DatabaseHandler:
class DatabaseHandler{
DatabaseHandler._();
static final DatabaseHandler db = DatabaseHandler._();
static DatabaseHandler get() {
return db;
}
static Database _database;
final databaseName = "recipe.db";
DatabaseHandler._createInstance();
Future<Database> get database async {
if (_database != null)
return _database;
_database = await initDB();
return _database;
}
initDB() async {
var path = await getDatabasesPath();
print("Creating tables at path: $path");
var dbPath = join(path, 'recipe.db');
Database dbConnection = await openDatabase(dbPath, version: 1,
onCreate: (Database db, int version) async {
return db.execute(
"CREATE TABLE ingredients(id INTEGER PRIMARY KEY, name TEXT, age INTEGER)",
);
}
);
await _loadIngredients(dbConnection);
return dbConnection;
}
_loadIngredients(Database db) async {
Batch batch = db.batch();
List<Map<String, dynamic>> records = await db.query('ingredients');
print(records);
String ingredientsJson = await rootBundle.loadString('assets/json/ingredients.json');
List ingredientsList = json.decode(ingredientsJson);
ingredientsList.forEach((val) {
print(val);
Ingredient ingredient = Ingredient.fromMap(val);
batch.insert("ingredients", ingredient.toMap(false));
});
var results = await batch.commit();
}
}
My ingredient class:
class Ingredient {
int id;
String name;
String categoryName;
DateTime dateCreated;
Ingredient(this.id, this.name, this.categoryName, this.dateCreated);
Map<String, dynamic> toMap(bool forUpdate) {
if(dateCreated == null) {
dateCreated = new DateTime.now();
}
var data = {
// 'id': id, since id is auto incremented in the database we don't need to send it to the insert query.
'name': utf8.encode(name),
'category_name': utf8.encode(categoryName),
'date_created': epochFromDate( dateCreated )
};
if(forUpdate){
data["id"] = this.id;
}
return data;
}
Ingredient.fromMap(Map map){
id = map["id"];
name = map["name"];
categoryName = map["category_name"];
dateCreated = map["date_created"];
}
// Converting the date time object into int representing seconds passed after midnight 1st Jan, 1970 UTC
int epochFromDate(DateTime dt) {
return dt.millisecondsSinceEpoch ~/ 1000 ;
}
// overriding toString() of the note class to print a better debug description of this custom class
#override toString() {
return {
'id': id,
'name': name,
'category_name': categoryName,
'date_created': epochFromDate( dateCreated )
}.toString();
}
}
My homepage class where I am initializing my DB:
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<Map<String, dynamic>> _allIngredientsInQueryResult = [];
var notesViewType ;
#override void initState() {
super.initState();
notesViewType = viewType.Staggered;
DatabaseHandler.db.initDB();
retrieveAllIngredientsFromDatabase();
}
#override
Widget build(BuildContext context) {
return
Container(
child: _ingredientList()
);
}
Widget _ingredientList() {
return Container(
child: ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: _allIngredientsInQueryResult.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
color: Colors.amber[100],
child: Center(child: Text('Entry ${_allIngredientsInQueryResult[index]["name"]}')),
);
},
separatorBuilder: (BuildContext context, int index) => const Divider(),
)
);
}
retrieveAllIngredientsFromDatabase() async {
var _testData = await DatabaseHandler.db.selectAllIngredients();
setState(() {
_allIngredientsInQueryResult = _testData;
});
}
}
Image of what I am seeing in the app:
Ingredients json

Answer 1

if you use utf8.encode(name), you convert your String in bytes something like flour = [102, 108, 111, 117, 114]
and when you display this values you must also set a utf8.decode(map["name"])
in your example something like
Text('Entry ' + utf8.decode(${_allIngredientsInQueryResult[index]["name"]})))
every time your initDB() is calling, the Data comes again in the DB. You can do it only in the onCreate part of the Sqlite DB
initDB() async {
var path = await getDatabasesPath();
print("Creating tables at path: $path");
var dbPath = join(path, 'recipe.db');
Database dbConnection = await openDatabase(dbPath, version: 1,
onCreate: (Database db, int version) async {
await db.execute(
"CREATE TABLE ingredients(id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, category_name TEXT, date_created INTEGER)",
);
await _loadIngredients(db);
}
);
return dbConnection;
}
i would also use your model class and not a dynimac map
Define _allIngredientsInQueryResult
List<Ingredient> _allIngredientsInQueryResult = new List();
get selectAllIngredients, with the fromMap()
Future<List<Ingredient>> selectAllIngredients() async {
var dbClient = await database;
List<Map> result = await dbClient.query('ingredients');
List<Ingredient> r_ingredient = result.map((i) => Ingredient.fromMap(i)).toList();
return r_ingredient;
}
set Decode in the fromMap()
Ingredient.fromMap(Map map){
id = map["id"];
name = utf8.decode(map["name"]);
categoryName = utf8.decode(map["category_name"]);
dateCreated = DateTime.fromMillisecondsSinceEpoch(map["date_created"]);
}
get Ingredients
retrieveAllIngredientsFromDatabase() async {
DatabaseHandler.db.selectAllIngredients().then((List<Ingredient> r_ingredient) {
setState(() {
_allIngredientsInQueryResult = r_ingredient;
});
});
}
display in the Listview
Text('Entry ' + _allIngredientsInQueryResult[index].name)