Flutter: How to handle using StreamProvider, FireStore and using Drawer - flutter

Question

I have a problem in using 'StreamProvider' and having 'Provider.of' delivering the goodies. I have two interlinked issues. (1) is I can't get ProxyProvider to work (and most likely I am just misunderstanding it, and it may not be the solution). (2) The widget Drawer() (or the way I am using it) seems to block 'Provider.of'. 'StreamProvider' can't be found up the tree.
In MyApp() I initially had:
return MultiProvider(
providers: [
StreamProvider<User>.value(value: AuthService().user),
StreamProvider<UserData>.value(
value: DatabaseServices(uid: 'user.userUid').userData),
StreamProvider<QuerySnapshot>.value(
value: DatabaseServices(uid: 'user.userUid').allTasks),
StreamProvider<List<TaskDetails>>.value(
value: DatabaseServices(uid: 'user.userUid').userTasksByImportance),
StreamProvider<List<PropertyDetails>>.value(
value: DatabaseServices(uid: 'UuO2DO0JUVbVD0R1JqIclI7fprF3')
.userProperties),
],
child: MaterialApp(
theme: themeData,
home: Wrapper(),
routes: {
SettingsForm.id: (context) => SettingsForm(),
TaskList.id: (context) => TaskList(),
AddTask.id: (context) => AddTask(),
EditTask.id: (context) => EditTask(),
PropertyList.id: (context) => PropertyList(),
AddProperty.id: (context) => AddProperty(),
AddUnit.id: (context) => AddUnit(),
TestMarkdown.id: (context) => TestMarkdown(),
},
),
);
I tried to use ProxyProvider to supply a user.userUid from StreamProvider to the other StreamProviders below it but couldn't get anything to work.
Next in Wrapper() I tried this:
class Wrapper extends StatelessWidget {
#override
Widget build(BuildContext context) {
final user = Provider.of<User>(context);
if (user == null) {
return Authenticate();
} else {
return MultiProvider(
providers: [
StreamProvider<UserData>.value(
value: DatabaseServices(uid: user.userUid).userData),
StreamProvider<List<TaskDetails>>.value(
value: DatabaseServices(uid: user.userUid).userTasksByImportance),
StreamProvider<QuerySnapshot>.value(
value: DatabaseServices(uid: user.userUid).allTasks),
StreamProvider<List<PropertyDetails>>.value(
value: DatabaseServices(uid: user.userUid).userProperties),
],
child: Home(),
);
}
}
}
Now this is below MaterialApp() which I didn't think was a good idea, but I could make user.user.Uid available to the other StreamProvider(s) and all worked. Provider.of in Home() and HomePage() (called by Home()) supplied the goodies.
Now Home() has a Drawer:
return Scaffold(
drawer: buildDrawer(context),
backgroundColor: Colors.blueAccent[50],
appBar: appBar,
body: Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage('assets/property_returns_logo_drawn.png'),
fit: BoxFit.fitWidth),
),
child: HomePage(),
),
);
}
}
Drawer buildDrawer(BuildContext context) {
final user = Provider.of<User>(context);
final userData = Provider.of<UserData>(context);
final userProperties = Provider.of<List<PropertyDetails>>(context);
final double _minHeight = 40;
final double _maxHeight = 40;
return Drawer(
child: ListView(
padding: EdgeInsets.all(0),
children: <Widget>[
DrawerHeader(
and userProperties is available within the drawer itself, but any widget called from the drawer gives the error that it can't find a relevant StreamProvider for the Provider.of. If I reput the relevant StreamProvider back in MyAPP() the relevant StreamProvider can be found. But with no values from Firestore unless I fudge and for user.userUid hardcode a valid uid:. Obviously not a solution but works as far as the widgets called by Drawer is concerned.
What I am looking for is to understand how to use ProxyProvider, or if that is not the solution, how to structure my code. Maybe I can use StreamProviders (or StreamBuilders) in every widget called from Drawer but that doesn't feel right. Code is at https://github.com/sctajc/property_returns.

Answer 1

As of today, ProxyProvider doesn't work as the StreamProvider, so you cannot use it the way you want.
To answer why your Drawer has access to Provider.of<Foo> while the routes opened from it haven't, is because the routes are defined in your MaterialApp.
What does this mean? It means that while Drawer is below Wrapper and thus, has access to Provider.of<Foo>, the other routes are technically above the Wrapper widget.
TL:DR
The solution would be just creating one ProxyProvider of your DatabaseServices like this:
ProxyProvider<User, DatabaseServices>(
update: (_, user, __) => DatabaseServices(uid: user?.userUid),
),
And then, if you need to tap into the UserData, you just need to do:
Provider.of<DatabaseServices>(context).userData
This way you avoid creating 4 instances of the same object (DatabaseServices) and at the same time, you solve your problem. However, the logic of your app will need to change a bit to make it work, I am sure it won't be a problem.
I hope this can help you and you can keep on developing your app!