Flutter, Dart, Firestore: How can I send user data retrieved from firestore to a different screen?

Question

I have a screen where a list of users are shown using stream builder to retrieve user data from 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();
                    }
                  },
                ),

I want that once a user clicks on the card it will navigate to screen 2 which will show the user profile with the data retrieved from firestore

eg Card 1: Name => Samia Address=> USA Number=> 4659848668 user will press on it and it will navigate to screen 2 with the information of Samia's.

How can I achieve it?

Answer 1

Let's say you call the new screen DetailScreen, you should have it take a Map of preferably an object of the items you want to display in it for example:

in the DetailScreen definition you can have:

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),
      ),
    );
  }
}

Then in your GestureDetector onTap method you can then do something like:

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

Since you are not using a model like my example above, you can make the second screen accept a Map field, then you pass in snapshot.data.docs[index].data() as the value when you are navigating to it.

So this will now read:

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']),
      ),
    );
  }
}

And while navigating you just do Navigator.push( context, MaterialPageRoute( builder: (context) => DetailScreen(user: snapshot.data.docs[index].data()), ), );