How am i able to retrieve specific users data using StreamBuilder? - firebase

Question

1) This is the view team/view roster screen. https://imgur.com/a/k63lQrt
class ViewTeamScreen extends StatelessWidget {
static const routeName = '/view-team';
const ViewTeamScreen({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return StreamProvider<List<User>>.value(
value: DBService().getAllUsers,
child: Scaffold(
body: TeamList()
),
);
}
}
2) This is the team list code that displays all user data on the ViewTeamScreen and returns a TeamTile widget i created.
class TeamList extends StatefulWidget {
#override
_TeamListState createState() => _TeamListState();
}
class _TeamListState extends State<TeamList> {
#override
Widget build(BuildContext context) {
final users = Provider.of<List<User>>(context) ?? [];
//print(users);
return ListView.builder(
itemCount: users.length,
itemBuilder: (context, index) {
return TeamTile(
user: users[index],
);
},
);
3) This is the TeamTile, which returns ListViewBuilder for a team member once they sign up to the app.
class TeamTile extends StatelessWidget {
final User user;
TeamTile({this.user});
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(top: 8.0),
child: Card(
margin: EdgeInsets.fromLTRB(20, 6, 20, 0),
child: ListTile(
leading: CircleAvatar(
radius: 30.0,
backgroundColor: Colors.brown,
),
title: Text(
'${user.firstName}'
" "
'${user.lastName}', //how do i make the first letter of name always CAPS?
style: TextStyle(fontSize: 23, letterSpacing: 1.0),
),
trailing: Text(user.email),
subtitle: Text('[phone]'),
onTap: () async {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TeamDetailScreen(),
),
);
},
),
4) This is the team detail screen, once the user taps on the ListTile in the ViewTeamScreen, this page will apear. https://imgur.com/a/7tSUO1c
class TeamDetailScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
final user = Provider.of<User>(context);
return Scaffold(
appBar: AppBar(
title: Text('Employee Contact Info'),
),
body: StreamBuilder<User>(
stream: DBService(uid: user.uid).usersData,
builder: (context, snapshot) {
if (snapshot.hasData) {
User userData = snapshot.data;
return Column(children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Name: ${userData.firstName}'
" "
'${userData.lastName}\n'
'Email: ${userData.email}',
style: TextStyle(fontSize: (20)),
),
)),
]);
} else {
return Loading();

Answer 1

This is going to exclude StreamProvider and just use StreamBuilder. This concept is easy to understand, as all we are doing is passing the widget.index down to other Widgets as arguments.
1
class ViewTeamScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return StreamBuilder<List<User>>(
stream: DBService().getAllUsers,
builder: (context, snapshot) {
if (snapshot.hasData) {
List<User> userData = snapshot.data;
return Scaffold(body: TeamList(myData: userData));
} else {
return Loading();
}
});
}
}
2
class TeamList extends StatefulWidget {
final List<User> myData;
TeamList({this.myData});
#override
_TeamListState createState() => _TeamListState();
}
class _TeamListState extends State<TeamList> {
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: widget.myData.length,
itemBuilder: (context, index) {
return TeamTile(
usersInfo: widget.myData[index],
);
},
);
}
}
3
class TeamTile extends StatelessWidget {
final User usersInfo;
TeamTile({this.usersInfo});
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(top: 8.0),
child: Card(
margin: EdgeInsets.fromLTRB(20, 6, 20, 0),
child: ListTile(
leading: CircleAvatar(
radius: 30.0,
backgroundColor: Colors.brown,
),
title: Text(
'${usersInfo.firstName}'
" "
'${usersInfo.lastName}', //how do i make the first letter of name always CAPS?
style: TextStyle(fontSize: 23, letterSpacing: 1.0),
),
trailing: Text(usersInfo.email),
subtitle: Text('[phone]'),
onTap: () async {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => TeamDetailScreen(myDetails: usersInfo),
),
);
},
),
),
);
}
}
4
class TeamDetailScreen extends StatelessWidget {
final User myDetails;
TeamDetailScreen({this.myDetails});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Name: ${myDetails.firstName}'
" "
'${myDetails.lastName}\n'
'Email: ${myDetails.email}',
style: TextStyle(fontSize: (20)),
),
)),
]),
);
}
}