Flutter、Dart、Firestore：如何將從 firestore 檢索到的用戶數據發送到不同的屏幕？

Question

我有一個屏幕，其中顯示了使用 stream 構建器從 firestore 檢索用戶數據的用戶列表。

StreamBuilder(
                  stream: Collection
                      .where('WorkType', isEqualTo: widget.worktype)
                      .snapshots(),
                  builder: (context, AsyncSnapshot snapshot) {
                    
                    if (snapshot.hasData) {
                      return Container(
                        height: 600,
                        child: ListView.builder(
                            itemCount: snapshot.data.docs.length,
                            itemBuilder: (context, index) {
                              return Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Container(
                                  height: 100,
                                  child: GestureDetector(
                                    onTap: () {
                                      //Navigate to Screen two
                                    },
                                    child: Card(
                                      child: Padding(
                                        padding: const EdgeInsets.all(8.0),
                                        child: Column(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: <Widget>[
                                            Text(
                                                snapshot.data.docs[index].data()['Name'],
                                                style: kRobotoSlab.copyWith(
                                                    fontSize: 20)),
                                            Text(
                                              snapshot.data.docs[index]
                                                  .data()['Address'],
                                              style: kRobotoSlab.copyWith(
                                                  fontSize: 15),
                                            ),
                                            Text(
                                              snapshot.data.docs[index]
                                                  .data()['Phone Number'],
                                              style: kRobotoSlab.copyWith(
                                                  fontSize: 15),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              );
                            }),
                      );
                    } else if (snapshot.hasError) {
                      return Text(snapshot.error.toString());
                    } else {
                      return CircularProgressIndicator();
                    }
                  },
                ),

我希望一旦用戶點擊卡片，它將導航到屏幕 2，該屏幕將顯示用戶個人資料以及從 firestore 檢索到的數據

例如卡1：名稱=> Samia 地址=> 美國號碼=> 4659848668 用戶將按下它，它將導航到帶有Samia 信息的屏幕2。

我怎樣才能實現它？

Answer 1

假設您將新屏幕稱為 DetailScreen，您應該讓它采用 Map，最好是 object，例如：

在DetailScreen定義中，您可以擁有：

class DetailScreen extends StatelessWidget {
  // Declare a field that holds the Item.
  final User user;

  // In the constructor, require a user.
  DetailScreen({Key? key, required this.user}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Use the Todo to create the UI.
    return Scaffold(
      appBar: AppBar(
        title: Text(user.name),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(user.address),
      ),
    );
  }
}

然后在您的GestureDetector onTap 方法中，您可以執行以下操作：

  Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => DetailScreen(user: users[index]),
          ),
        );

由於您沒有像上面的示例那樣使用 model ，因此您可以讓第二個屏幕接受 Map 字段，然后在導航到它時傳入snapshot.data.docs[index].data()作為值。

所以現在將顯示為：

class DetailScreen extends StatelessWidget {
  // Declare a field that holds the Item.
  final Map user;

  // In the constructor, require a user map.
  DetailScreen({Key? key, required this.user}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Use the Todo to create the UI.
    return Scaffold(
      appBar: AppBar(
        title: Text(user['Name']),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(user['Address']),
      ),
    );
  }
}

在導航時，您只需執行 Navigator.push( context, MaterialPageRoute( builder: (context) => DetailScreen(user: snapshot.data.docs[index].data()), ), );