Create a FeatureBuilder from Database in Flutter - database

Question

I have saved my phone's call list to a database and now I want to create a ListView from this database. I have already written this code. But it is not working. what is wrong with my code?
database_helper.dart
...
Future<List<Map<String, dynamic>>> queryAllRows() async {
Database db = await instance.database;
return await db.query(table);
}
...
my_home.dart
...
FutureBuilder(
future: db.queryAllRows(),
builder: (context, snapshot) {
if (!snapshot.hasData)
return Center(child: CircularProgressIndicator());
List entries = snapshot.data.toList();
return Scrollbar(
child: ListView.builder(
itemBuilder: (context, index) {
var entry = entries[index];
var mono = TextStyle(fontFamily: 'monospace');
return Column(
children: <Widget>[
Divider(),
Text('NUMBER : ${entry.number}', style: mono),
Text('NAME : ${entry.name}', style: mono),
Text('TYPE : ${entry.callType}', style: mono),
Text(
'DATE : ${DateTime.fromMillisecondsSinceEpoch(entry.timestamp)}',
style: mono),
Text('DURATION : ${entry.duration}',
style: mono),
],
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
);
},
itemCount: entries.length,
),
);
})
...

Answer 1

You need to use ConnectionState inside your builder. Look at this code template: (Currently the builder return your widget without waiting for the future to complete)
return FutureBuilder<List<Map<String, dynamic>>>(
future: db.queryAllRows(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
// future complete
if (snapshot.hasError || !snapshot.hasData) {
return Center(child: CircularProgressIndicator());
}
// future complete with no error and has data
List entries = snapshot.data.toList();
return Scrollbar(
child: ListView.builder(
itemBuilder: (context, index) {
var entry = entries[index];
var mono = TextStyle(fontFamily: 'monospace');
return Column(
children: <Widget>[
Divider(),
Text('NUMBER : ${entry.number}', style: mono),
Text('NAME : ${entry.name}', style: mono),
Text('TYPE : ${entry.callType}', style: mono),
Text(
'DATE : ${DateTime.fromMillisecondsSinceEpoch(entry.timestamp)}',
style: mono),
Text('DURATION : ${entry.duration}', style: mono),
],
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
);
},
itemCount: entries.length,
),
);
}
// return loading widget while connection state is active
else {
return Center(child: CircularProgressIndicator());
}
});