在 Flutter 的小部件中显示 Firebase 实时数据库数据答案

【问题标题】：Show Firebase RealTime Database data in a widget in Flutter在 Flutter 的小部件中显示 Firebase 实时数据库数据
【发布时间】：2020-10-05 16:45:16
【问题描述】：

使用带有flutter的firebase实时数据库，将用户详细信息保存在实时数据库中，并将显示在他们的个人资料页面中。我能够从数据库存储和获取数据，但数据不会反映在屏幕上，我试图将数据显示为文本字段中的初始值。当用户点击个人资料时，如何在个人资料页面上显示数据？

  getUserDetails() async {
    final userProfileDetails = await FirebaseDatabase.instance
        .reference()
        .child("userDetails")
        .child(FirebaseAuth.instance.currentUser.uid)
        .once()
        .then((DataSnapshot snapshot) {
     setState(() {
       email = snapshot.value['email'];
       city = snapshot.value['city'];
       state = snapshot.value['state'];
     });
    });
    return data;
  }

小部件树 - Scaffold > Column > TextFormFields

                 TextFormField(
                    initialValue: email,
                    onChanged: (value) {
                      petName = value;
                    },
                    decoration: InputDecoration(
                        suffixIcon: Icon(
                          Icons.email,
                          color: grey700,
                        ),
                        labelText: 'Email'),
                  ),

【问题讨论】：

标签： firebase flutter dart firebase-realtime-database

【解决方案1】：

如果你想从数据库中看到实时变化，你需要利用 Flutter 的提供者和流原则。

简而言之：您正在创建一个传递所需数据的流（一个流正在侦听特定的集合/文档）。因此，如果流的某些数据发生更改，您会收到通知。通知最终出现在您必须用来包装小部件的提供程序中。每次流传递新数据时，您包装的小部件和下面的所有内容都会重新构建。

【讨论】：