Gridview.builder与Firebase实时数据库和futurebuilder

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

---

我可以用下面的代码来解决它。我必须再次指出，Firebase文档确实缺乏，这是非常令人失望的，因为Firebase是一个伟大的工具。此外，我不明白，没有关于“如何将Firebase与Flatter一起使用”的文档，我们正在讨论这两种谷歌产品。尽管如此，以下是适用于喜欢将Streambuilder与Gridview.builder结合使用并在Flatter中使用实时数据库的任何人的工作代码：

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

---

我所做的帮助我解决问题的事情是，通过以下方式显式地将快照转换为映射

Map yourModel = Map.from(datasnapshot);

在处理空数据等情况时，我还必须按照以下方式将来自future Builder的asyncSnap值转换为来自firebase的Datasnapshot

Datasnapshot snap = asyncSnap.data;

然后，snap的句柄为null

if(snap.value!=null){}

希望这有帮助！如果你需要帮助，给我发个短信