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

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
e.g. 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()),
),
);