我最近尝试制作一个 Flutter 应用程序，该应用程序从谷歌云 Firestore 获取数据流，并在新屏幕上显示为用户的卡片。我遇到了this网站并密切关注示例以从流数据中创建 ListView ，并且能够以不那么多的努力实现相同的功能。这是它的样子......

带有 ListView 的 Flutter 应用成功实现:

但问题是，当我尝试将输出转换为卡片而不是简单的 ListView 时，我收到一条警告，提示我的小部件溢出。看看下面...

卡片溢出警告:

我试图将整个小部件放在一个约束框中，还试图使 shrinkWrap 属性为真，但似乎没有任何帮助。如果有人能帮助我找出错误的地方并指出正确的方向，我将非常高兴。 这是我为使用 Firestore 从 streamBuilder 类实现卡片布局而编写的全部代码...

(PS:卡片布局和ListView布局在应用程序右上角的图形图标中显示[未在图片中显示])

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'dart:async';

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

class FireList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Listview',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyListView(),
    );
  }
}

class MyListView extends StatefulWidget {
  @override
  _MyListViewState createState() => _MyListViewState();
}

class _MyListViewState extends State<MyListView> {
  int _upCounter = 0;
  int _downCounter = 0;
  var _newdata;
  var myDatabase = Firestore.instance;

  void _putdata() {
    var myDatabase = Firestore.instance;
    myDatabase.collection('newDoc1').document("outsideData$_upCounter").setData(
      {
        "data": "Uploaded outsider data $_upCounter",
      },
    );
    _upCounter++;
  }

  @override
  Widget build(BuildContext context) {
    _putdata();
    return Scaffold(
      appBar: AppBar(
        title: Text('Firebse Listview'),
        actions: <Widget>[
          IconButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => MyList()),
              );
            },
            icon: Icon(Icons.multiline_chart),
          )
        ],
      ),
      // body: Center(
      //   child: Text(
      //       "Cloud Firestore contains this sentence:\nFetch Attemp: $_downCounter\nData: $_datafromfirestore"),
      // ),
      body: StreamBuilder(
        stream: myDatabase.collection('newDoc1').snapshots(),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            Center(
              child: Text("\nCaught an error in the firebase thingie... :| "),
            );
          }
          if (!snapshot.hasData) {
            return Center(
              child: Text("\nHang On, We are building your app !"),
            );
          } else {
            var mydata = snapshot.data;
            print(mydata);
            _newdata = mydata.documents[_downCounter]["data"];
            return Center(
              child: Text(
                  "Cloud Firestore contains this sentence:\nFetch Attempt: $_downCounter\nData: $_newdata"),
            );
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _downCounter++;
          });
        },
        child: Icon(Icons.cloud_download),
        tooltip: 'Download Data',
      ),
    );
  }
}

class MyList extends StatefulWidget {
  @override
  _MyListState createState() => _MyListState();
}

class _MyListState extends State<MyList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView Firestore"),
      ),
      body: StreamBuilder<QuerySnapshot>(
        stream: Firestore.instance.collection("newDoc1").snapshots(),
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasError) return new Text('${snapshot.error}');
          switch (snapshot.connectionState) {
            case ConnectionState.waiting:
              return new Center(child: new CircularProgressIndicator());
            default:
              // return ListView(
              //   padding: EdgeInsets.fromLTRB(10, 20, 10, 30),
              //   children:
              //       snapshot.data.documents.map((DocumentSnapshot document) {
              //     return new ListTile(
              //       title: new Text(document['data']),
              //     );
              //   }).toList(),
              // );
              return Card(
                child: Column(
                  children: <Widget>[
                    ListView(
                      shrinkWrap: true,
                      children: snapshot.data.documents.map(
                        (DocumentSnapshot document) {
                          return new ListTile(
                            title: new Text(document['data']),
                          );
                        },
                      ).toList(),
                    ),
                  ],
                ),
              );
          }
        },
      ),
    );
  }
}

这是我的云 Firestore 文档的样子:

最佳答案

我认为您想在 Card 中显示所有数据，对吗？

我编辑你的代码，这个应该适合你:

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

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

class FireList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Listview',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyListView(),
    );
  }
}

class MyListView extends StatefulWidget {
  @override
  _MyListViewState createState() => _MyListViewState();
}

class _MyListViewState extends State<MyListView> {
  int _upCounter = 0;
  int _downCounter = 0;
  var _newdata;
  var myDatabase = Firestore.instance;

  void _putdata() {
    var myDatabase = Firestore.instance;
    myDatabase.collection('newDoc1').document("outsideData$_upCounter").setData(
      {
        "data": "Uploaded outsider data $_upCounter",
      },
    );
    _upCounter++;
  }

  @override
  Widget build(BuildContext context) {
    _putdata();
    return Scaffold(
      appBar: AppBar(
        title: Text('Firebse Listview'),
        actions: <Widget>[
          IconButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => MyList()),
              );
            },
            icon: Icon(Icons.multiline_chart),
          )
        ],
      ),
      // body: Center(
      //   child: Text(
      //       "Cloud Firestore contains this sentence:\nFetch Attemp: $_downCounter\nData: $_datafromfirestore"),
      // ),
      body: StreamBuilder(
        stream: myDatabase.collection('newDoc1').snapshots(),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            Center(
              child: Text("\nCaught an error in the firebase thingie... :| "),
            );
          }
          if (!snapshot.hasData) {
            return Center(
              child: Text("\nHang On, We are building your app !"),
            );
          } else {
            var mydata = snapshot.data;
            print(mydata);
            _newdata = mydata.documents[_downCounter]["data"];
            return Center(
              child: Text(
                  "Cloud Firestore contains this sentence:\nFetch Attempt: $_downCounter\nData: $_newdata"),
            );
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _downCounter++;
          });
        },
        child: Icon(Icons.cloud_download),
        tooltip: 'Download Data',
      ),
    );
  }
}

class MyList extends StatefulWidget {
  @override
  _MyListState createState() => _MyListState();
}

class _MyListState extends State<MyList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView Firestore"),
      ),
      body: StreamBuilder<QuerySnapshot>(
        stream: Firestore.instance.collection("newDoc1").snapshots(),
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (snapshot.hasError) return new Text('${snapshot.error}');
          switch (snapshot.connectionState) {
            case ConnectionState.none:
            case ConnectionState.waiting:
              return Center(
                child: CircularProgressIndicator(),
              );
            case ConnectionState.active:
            case ConnectionState.done:
              if (snapshot.hasError)
                return Center(child: Text('Error: ${snapshot.error}'));
              if (!snapshot.hasData) return Text('No data finded!');
              return Card(
                child: SingleChildScrollView(
                  child: Column(
                    children:
                      snapshot.data.documents.map((DocumentSnapshot document){
                        return new Text(document['data']);
                      }).toList()
                  ),
                ),
              );
          }
        },
      ),
    );
  }
}

您也可以使用 ListView 来完成此解决方案，但我认为这更简单、更容易。

关于android - 在 flutter 中显示来自 Firestore 数据的卡片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55082466/