List view throws an error before stream has finished retrieving data

问题

I've been learning Flutter and following an online tutorial regarding Provider package, at present I'm working with StreamProvider.

I have a service which connects to Firestore and returns all documents within a collection ('reports'), these documents are then mapped to my report object.

Service:

class FirestoreService {
Firestore _db = Firestore.instance;
var random = Random();

Stream<List<Report>> getReports() {
return _db.collection('reports')
      .orderBy('timeStamp', descending: true)
      .snapshots()
      .map((snapshot) => snapshot.documents
      .map((document) => Report.fromJson(document.data))
      .toList());
}

Report class:

class Report {
final int temp;
final String wax;
final String line;
final String timeStamp;

Report({this.line,this.temp,this.timeStamp,this.wax});

Report.fromJson(Map<String, dynamic> parsedJson)
 : temp = parsedJson['temp'],
   wax = parsedJson['wax'],
   line = parsedJson['line'],
   timeStamp = parsedJson['timeStamp'];

}

Within main.dart I have used MultiProvider and added my StreamProvider.

main.dart:

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {

final FirestoreService _db = FirestoreService();

return MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (BuildContext context) => SettingsProvider()),
    StreamProvider(create: (BuildContext context) => _db.getReports(),)
  ],
  child: MaterialApp(
    title: 'Wax App',
    theme: ThemeData(
        primarySwatch: Colors.deepPurple,
        accentColor: Colors.deepOrangeAccent),
    home: Home(),
  ),
 );
}}

Now this is the issue, within home.dart I retrieve the report data and build a list view, however the list view is called before the getReports method has finished and occasionally throws an error when referencing the var reports

home.dart:

class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
var reports = Provider.of<List<Report>>(context);
FirestoreService _db = FirestoreService();

return Scaffold(
  appBar: AppBar(
    title: Text('Wax App'),
    centerTitle: true,
    actions: <Widget>[
      IconButton(
          icon: Icon(Icons.settings),
          onPressed: () {
            Navigator.of(context)
                .push(MaterialPageRoute(builder: (context) => Settings()));
          })
    ],
  ),
  body: ListView.builder(
      itemCount: reports.length,
      itemBuilder: (context, index) {
        Report report = reports[index];
        return ListTile(
            leading: Text(report.temp.toString()),
            title: Text(report.wax),
            subtitle: Text(report.line),
            trailing: Text(formatDate(DateTime.parse(report.timeStamp), [h, ':', mm, ' ', am])));
      }
      ) ,
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          _db.addReport();
        },
      ),
);
}}

For example one error in particular is thrown on this line:

itemCount: reports.length

reports being null at this point, so my question is how can I prevent the list view being built before the getReports methods has finished? what's the best way to handle such task?

Thanks

回答1:

Try this:

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var reports = Provider.of<List<Report>>(context);
    FirestoreService _db = FirestoreService();

    return Scaffold(
      appBar: AppBar(
        title: Text('Wax App'),
        centerTitle: true,
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {
                Navigator.of(context)
                    .push(MaterialPageRoute(builder: (context) => Settings()));
              })
        ],
      ),
      body: reports!=null ? (reports.length > 0 ? ListView.builder(
          itemCount: reports.length,
          itemBuilder: (context, index) {
            Report report = reports[index];
            return ListTile(
                leading: Text(report.temp.toString()),
                title: Text(report.wax),
                subtitle: Text(report.line),
                trailing: Text(formatDate(DateTime.parse(report.timeStamp), [h, ':', mm, ' ', am])));
          }
      ): Center(child: Text("We have received no data")))   : Center(child: Text("We are fetching data.Please wait...")),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          _db.addReport();
        },
      ),
    );
  }}

来源：https://stackoverflow.com/questions/60981722/list-view-throws-an-error-before-stream-has-finished-retrieving-data