如何在多行中显示从firebase检索的数据？ [关闭]答案

【问题标题】：How to pull data from firestore and display on the screen in flutter? [closed]如何在多行中显示从firebase检索的数据？ [关闭]
【发布时间】：2022-01-23 23:12:33
【问题描述】：

我正在开发一个颤振项目。我已经在我的项目上设置了 firebase firestore。但是现在，我想从 Firestore 中检索数据并在多行中显示数据。但是现在，我一次只能显示一个句子，但我想显示多行，我现在无法做到。

为了更好地理解我的问题，我将包含下面的代码。

Code：

class GetNotifications extends StatelessWidget {
  final uid = FirebaseAuth.instance;

  final String documentId;

  GetNotifications(this.documentId);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: FirebaseAuth.instance.authStateChanges(),
        builder: (context, snapshot) {
          if (snapshot.connectionState != ConnectionState.active) {
            return const Center(
                child: CircularProgressIndicator()); // ???? user is loading
          }
          final user = snapshot.data;
          if (user != null) {
            CollectionReference users =
                FirebaseFirestore.instance.collection('notifications');

            return FutureBuilder<DocumentSnapshot>(
              future: users.doc(documentId).get(),
              builder: (BuildContext context,
                  AsyncSnapshot<DocumentSnapshot> snapshot) {
                if (snapshot.hasError) {
                  return const Text("Something went wrong");
                }

                if (snapshot.hasData && !snapshot.data!.exists) {
                  return const Text("Document does not exist");
                }

                if (snapshot.connectionState == ConnectionState.done) {
                  Map<String, dynamic> data =
                      snapshot.data!.data() as Map<String, dynamic>;
                  return Text("${data['Notification']}");
                }

                return const Text("loading");
              },
            );
          } else {
            return const Text("user is not logged in");
          }
        });
  }
}

// ignore: use_key_in_widget_constructors
class Notifications extends StatelessWidget {
  final uid = FirebaseAuth.instance.currentUser!.uid;
  @override
  Widget build(BuildContext context) {
    MediaQueryData screen = MediaQuery.of(context);
    return Scaffold(
        body: SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(top: 50.0, right: 1),
            child: Center(
              child: Container(
                width: 200.0,
                height: 20.0,
                decoration:
                    BoxDecoration(borderRadius: BorderRadius.circular(15.0)),
                child: (const Text(
                  'Notifications',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.black),
                )),
              ),
            ),
          ),
          Row(children: const <Widget>[
            Expanded(child: Divider()),
          ]),
          Container(
            width: screen.size.width,
            child: SafeArea(
              top: true,
              bottom: true,
              child: GetNotifications(uid),
            ),
          )
        ],
      ),
    ));
  }
}

通过此代码，我可以显示来自 firestore 的数据，但一次只能显示一行。我希望能够同时垂直显示多行。

我该如何存档？

【问题讨论】：

你检查文档了吗？
是的，但还是想不通

标签： firebase flutter dart google-cloud-firestore

【解决方案1】：

你需要坐下来阅读一下flutter fire的文档，文档很完整，很好解释You can start here，如果你想要视频，有一个很好的资源here。

【讨论】：

我经历了这个，但我不明白如何将它与firebase提供的用户ID联系起来。
我喜欢用视频学习，这个对你有帮助youtube.com/watch?v=qWy9ylc3f9U

【解决方案2】：

所以我理解，有时迷路是完全正常的。打开 FlutterFire 文档或尝试 YouTube，首先将您的应用程序连接到您的 Firebase 数据库。然后，您应该使用它们提供的语法/API 来显示文本或其他内容。首先，获取值，然后将其存储在本地变量中，然后在 Text(variable_here) 中显示该变量。

【讨论】：