Question

来自Firestore，我有点挣扎着如何从Firebase实时数据库接收数据。我只想要一个从实时数据库加载的图像的漂亮网格视图。

Error: flutter: The following NoSuchMethodError was thrown building:
flutter: Class 'DataSnapshot' has no instance method '[]'.
flutter: Receiver: Instance of 'DataSnapshot'

我想它与索引有关。不知道如何在列表中正确映射它。

import 'package:cached_network_image/cached_network_image.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
        alignment: Alignment.center,
        padding: const EdgeInsets.all(16.0),
        child: new FutureBuilder(
            future: FirebaseDatabase.instance
                .reference()
                .child('messages')
                .child('1551276762582')
                .orderByChild('messagetype')
                .equalTo('1')
                .once(),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (snapshot.hasData) {
                if (snapshot.data != null) {
                  return new Column(
                    children: <Widget>[
                      new Expanded(
                        child: new GridView.builder(
                          // itemCount: item.length,
                          gridDelegate:
                              new SliverGridDelegateWithFixedCrossAxisCount(
                                  crossAxisCount: 2),
                          itemBuilder: (context, index) {
                            return GridTile(
                                child: CachedNetworkImage(
                                    imageUrl: snapshot.data[index]['imageUrl']
                                        .toString()));
                          },
                        ),
                      )
                    ],
                  );
                } else {
                  return new CircularProgressIndicator();
                }
              } else {
                return new CircularProgressIndicator();
              }
            }));
  }
}

Answer 1

我可以用以下代码解决它。再说一遍，我不得不说Firebase文档确实缺乏，这很令人失望，因为Firebase是一个很好的工具。而且，我不明白，没有关于“如何在Flutter中使用Firebase的文档”（我们正在讨论这两种Google产品。）尽管如此，这是适合喜欢将Streambuilder与Gridview.builder一起使用的任何人的有效代码。在Flutter中使用实时数据库：

StreamBuilder(
              stream: FirebaseDatabase.instance
                  .reference()
                  .child('messages')
                  .child(groupId)
                  .orderByChild('messagetype')
                  .equalTo(1)
                  .onValue,
              builder: (BuildContext context, AsyncSnapshot<Event> snapshot) {
                if (snapshot.hasData) {
                  if (snapshot.data.snapshot.value != null) {
                    Map<dynamic, dynamic> map = snapshot.data.snapshot.value;
                    List<dynamic> list = map.values.toList()
                      ..sort(
                          (a, b) => b['timestamp'].compareTo(a['timestamp']));

                    return GridView.builder(
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 3),
                      itemCount: list.length,
                      padding: EdgeInsets.all(2.0),
                      itemBuilder: (BuildContext context, int index) {
                        return Container(
                          child: GestureDetector(
                            onTap: () {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => SecondScreen(
                                        imageUrl: list[index]["imageUrl"])),
                              );
                            },
                            child: CachedNetworkImage(
                              imageUrl: list[index]["imageUrl"],
                              fit: BoxFit.cover,
                            ),
                          ),
                          padding: EdgeInsets.all(2.0),
                        );
                      },
                    );
                  } else {
                    return Container(
                        child: Center(
                            child: Text(
                      'Es wurden noch keine Fotos im Chat gepostet.',
                      style: TextStyle(fontSize: 20.0, color: Colors.grey),
                      textAlign: TextAlign.center,
                    )));
                  }
                } else {
                  return CircularProgressIndicator();
                }
              })),

Answer 2

我可以通过以下方式将快照明确转换为Maps来帮助解决问题。

router.post('/login', function (req, res, next) {
    admins.find({}, function (err, user) {
        if (err) {
            console.log('internal database error');
            req.flash('error', 'Database Error');
            res.redirect('/admins');
        } else {
            passport.authenticate('adminlogin', function (err, user, info) {
                if (err) {
                    console.log(err);
                    req.flash('error', 'Database Error');
                    res.redirect('/admins');
                } else if (!user) {
                    req.flash('error', info.message);
                    res.redirect('/admins');
                } else {
                    req.logIn(user, function (err) {
                        if (err) {
                            req.flash('error', 'Database Error');
                            res.redirect('/admins');
                        } else {
                            res.redirect('/admins/home');
                        }
                    });
                }
            })(req, res, next);
        }
    });
});

在处理空数据或类似数据时也有很多次，我必须通过以下方式将来自将来的Builder的asyncSnap值转换为firebase的Datasnapshot

Map yourModel = Map.from(datasnapshot);

然后将捕捉设置为空的句柄

Datasnapshot snap = asyncSnap.data;

希望这会有所帮助！如果您需要帮助，请给我发消息

带有Firebase实时数据库和futurebuilder的Gridview.builder

2 个答案: