Question

我目前遇到Flutter和Firebase的问题。

我想显示Firebase数据库中的数据。

大部分代码来自Fluttery在Tinder Cards上的视频，我只是想学习如何在卡片上显示姓名，照片，年龄和传记。我现在只想做名字和描述。

我当前的代码：

class _ProfileCardState extends State<ProfileCard> {

   Widget _buildProfileSynopsis() {
    return new Positioned(
      left: 0.0,
      right: 0.0,
      bottom: 0.0,
      child: new Container(
        padding: const EdgeInsets.all(24.0),
        child: new Row(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            new Expanded(
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                   new StreamBuilder<Event>(
                      stream: FirebaseDatabase.instance
                      .reference()
                      .child('items')
                      .child('-LD2vzOCd54yEFNXJpGj')
                      .onValue,
                      builder: (BuildContext context, AsyncSnapshot<Event> event) {
                        if (!event.hasData)
                          return new Center(child: new Text('Loading...'));
                        Map<dynamic, dynamic> data = event.data.snapshot.value;
                      return new Text('${event.data.snapshot.value}', style: new TextStyle(
                        fontSize: 30.0)
                        );
                      },
                    ),
                    new StreamBuilder<Event>(
                      stream: FirebaseDatabase.instance
                      .reference()
                      .child('items')
                      .child('-LD2vzOCd54yEFNXJpGj')
                      .onValue,
                      builder: (BuildContext context, AsyncSnapshot<Event> event) {
                        if (!event.hasData)
                          return new Center(child: new Text('Loading...'));
                        Map<dynamic, dynamic> data = event.data.snapshot.value;
                      return new Text('-${event.data.snapshot.value}');
                      },
                    ),
                ],
              ),
            ),
            new Icon(
              Icons.info,
              color: Colors.black,
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      decoration: new BoxDecoration(
        borderRadius: new BorderRadius.circular(10.0),
        boxShadow: [
          new BoxShadow(
            color: const Color(0x11000000),
            blurRadius: 5.0,
            spreadRadius: 2.0,
          ),
        ],
      ),
      child: ClipRRect(
        borderRadius: new BorderRadius.circular(10.0),
        child: new Material(
          child: new Stack(
            fit: StackFit.expand,
            children: <Widget>[
              _buildProfileSynopsis(),
            ],
          ),
        ),
      ),
    );
  }
class Males {
  String name, description;

  Males(this.name, this.description);
}
}

图片：

Importan screenshot

Image of my Database

正如您在Firebase的屏幕截图中看到的那样，每个人都有唯一的密钥，这使得很难参考单个数据。这是我的主要问题，因为我不知道如何将accountkey保存在字符串中，所以我可以执行.child（accountkey）。

所有youtube教程都显示一个Listview，但这只是在卡上的列表中显示数据，这没有用，因为每张卡都会显示每个用户。

在此先感谢您有任何疑问。希望您能提供帮助：）

Answer 1

早上好

我的方法与您悄然不同。我总是编写一个类从数据源获取数据，然后在任何地方使用它。我认为您是这个框架中的新手，所以我将逐步进行解释

获取数据类为：

class GetItemsFromDb {
  static Future<List> getItems( ) async {
    Completer<List> completer = new Completer<List>();

    FirebaseDatabase.instance
        .reference()
        .child("males")
        .once()
        .then( (DataSnapshot snapshot) {
      //print(snapshot.value);
      List map = snapshot.value;
      completer.complete(map);
    } );

    return completer.future;
  }
}

如您所说，您希望男性拥有所有物品。 Firebase数据库将为您提供地图列表（地图是字典）。

我将再次重写您的Males对象

class Males {
  String names;
  String desc;


  // empty constructor 
  Males();

  // constructor for firebase databases 
  Males.fromMap(Map<String, dynamic> map){
    names = map["name"];
    desc  = map["description"];
  }

}

现在您将其放在您的视图中

  List<Males> _males = [];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    GetItemsFromDb.getItems().then((list){
      print("Now the list is here");

      setState(() {
        for (int i=0; i < list.length; i++) {
          Map<String, dynamic> map = list[i];

          Males male = new Males.fromMap(map);
          _males.add(male);
        }
      });

    });
  }

现在您已经拥有了Firebase及其数据的完整列表，并且可以全部显示它们

Answer 2

您非常亲密。

您声明了地图Map<dynamic, dynamic> data = event.data.snapshot.value;，但没有使用它，而是在event.data.snapshot.value小部件中使用了Text。 event.data.snapshot.value是Firebase中子级下的所有数据。这就是为什么您在名称和说明中都看到所有数据的原因。取而代之的是，您应该使用data['name']和描述data['description']。方括号中的字符串是firebase数据库中的键。

另一建议是将所有用户数据以{strong> 1 Column的形式显示在StreamBuilder中，因为您不会两次下载数据。在这样的简单示例中，这并不重要，但是当您开始处理更大的数据时，这可能会影响加载时间。

这是_ProfileCardState的修订版，（希望）对您有用。如果您还有其他问题，请告诉我。

class _ProfileCardState extends State<ProfileCard> {
  Widget _buildProfileSynopsis() {
    return new Positioned(
      left: 0.0,
      right: 0.0,
      bottom: 0.0,
      child: new Container(
        padding: const EdgeInsets.all(24.0),
        child: new Row(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            new Expanded(
              child: new Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  new StreamBuilder<Event>(
                    stream: FirebaseDatabase.instance
                        .reference()
                        .child('items')
                        .child('-LD2vzOCd54yEFNXJpGj')
                        .onValue,
                    builder:
                        (BuildContext context, AsyncSnapshot<Event> event) {
                      if (!event.hasData)
                        return new Center(child: new Text('Loading...'));
                      Map<dynamic, dynamic> data = event.data.snapshot.value;
                      return Column(children: [
                        new Text('${data['name']}',
                            style: new TextStyle(fontSize: 30.0)),
                        new Text('-${data['description']}')

                      ]);
                    },
                  ),
                ],
              ),
            ),
            new Icon(
              Icons.info,
              color: Colors.black,
            ),
          ],
        ),
      ),
    );
  }

这是一张图片：

在Firebase中显示数据以应对抖动

2 个答案: