列表视图未显示流中的数据

时间:2020-04-02 03:44:45

标签: flutter flutter-provider flutter-listview

我有以下服务,该服务连接到Firestore并返回所有文档。

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

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


    return data;
}

我使用StreamProvider并在我的main.dart中创建对上述流的引用:

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(),
  ),
 );
}}

我的Home()小部件如下:

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

FirestoreService _db = FirestoreService();
SettingsProvider settings = Provider.of<SettingsProvider>(context);

var reports = Provider.of<List<Report>>(context);

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: (settings.units == 'Metric') 
            ? Text(report.temp.toString()+ '\u00B0')
            : Text((((report.temp) * (9/5)) + 32).round().toString() + '\u00B0'),
          title: Text(report.wax),
          subtitle: Text(report.line),
          trailing: Text(formatDate(
              DateTime.parse(report.timeStamp), [h, ':', nn, ' ', am])),
        );
      }),
    floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {
      _db.addReport();
    },
  ),
 );
}}

如您所见,我通过此行检索报告:

var reports = Provider.of<List<Report>>(context);

但是,我的列表视图是在报表填充数据之前构建的,即使返回数据后,列表视图也不会显示。

我单步执行了代码,并点击了getReports方法,检查了Firestore,那里有50多个记录。

我已根据原始问题的建议调整了此列表视图:List view throws an error before stream has finished retrieving data但是删除了找出问题的条件。

谁能建议这个问题是什么?

1 个答案:

答案 0 :(得分:0)

在获取报告数据之前,请先检查报告是否不等于null。

检查此代码

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

    FirestoreService _db = FirestoreService();
    SettingsProvider settings = Provider.of<SettingsProvider>(context);

    var reports = Provider.of<List<Report>>(context);

    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 ? ListView.builder(
          itemCount: reports.length,
          itemBuilder: (context, index) {
            Report report = reports[index];
            return ListTile(
              leading: (settings.units == 'Metric')
                  ? Text(report.temp.toString()+ '\u00B0')
                  : Text((((report.temp) * (9/5)) + 32).round().toString() + '\u00B0'),
              title: Text(report.wax),
              subtitle: Text(report.line),
              trailing: Text(formatDate(
                  DateTime.parse(report.timeStamp), [h, ':', nn, ' ', am])),
            );
          }):
          CircularProgressIndicator(),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          _db.addReport();
        },
      ),
    );
  }}```