Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to share provider data from streambuilder via different pages (contextes)

I want to have data from firebase in realtime on a widget. When I try to use a StreamProvider and then use Navigator.push(), the pushed widget can't get the value with Provider.of(context).

I tried putting the StreamProvider as the parent of MaterialApp. This works but the user needs to be logged in order for the Stream to get the data of the user. I also tried using a ScopedModel. This works as well, but I don't know if this is the best approach to do this.

I would like to avoid using a global StreamProvider and would like to have an efficient solution (as little reads from firebase as possible)

main.dart

void main() => runApp(MyApp());

final GlobalKey<ScaffoldState> mainScaffoldKey = GlobalKey<ScaffoldState>();
final GlobalKey<ScaffoldState> authScaffoldKey = GlobalKey<ScaffoldState>();

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ScopedModel<ScreenModel>(
      model: ScreenModel(),
      child: MultiProvider(
        providers: [
          StreamProvider<User>.value(value: authService.userDoc,),
          StreamProvider<bool>.value(value: authService.loading.asBroadcastStream())
        ],
        child: MaterialApp(
          title: "ListAssist",
          theme: ThemeData(
            primarySwatch: Colors.indigo,
          ),
          home: MainApp()
        ),
      )
    );
  }
}

class MainApp extends StatefulWidget {
  @override
  _MainAppState createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    User user = Provider.of<User>(context);
    bool loading = Provider.of<bool>(context);

    return AnimatedSwitcher(
      duration: Duration(milliseconds: 600),
      child: user != null ?
        StreamProvider<Group>.value(
          value: databaseService.streamGroupsFromUser(),
          child: Scaffold(
            key: mainScaffoldKey,
            body: Body(),
            drawer: Sidebar(),
          ),
        ) : Scaffold(
       key: authScaffoldKey,
       body: AnimatedSwitcher(
         duration: Duration(milliseconds: 600),
         child: loading ? SpinKitDoubleBounce(color: Colors.blueAccent) : AuthenticationPage(),
       ),
       resizeToAvoidBottomInset: false,
     )
    );
  }
}
class Body extends StatefulWidget {
  createState() => _Body();
}

class _Body extends State<Body> {

  @override
  Widget build(BuildContext context) {
    return ScopedModelDescendant<ScreenModel>(
      builder: (context, child, model) => model.screen
    );
  }
}

In the Sidebar I can change to GroupView and the Provider still works.

sidebar.dart (important part)

onTap: () {
  ScreenModel.of(context).setScreen(GroupView(), "Gruppen");
  Navigator.pop(context);
},

The GroupView has GroupItem in it

group-item.dart (important part)

onTap: () => Navigator.push(
  context,
  MaterialPageRoute(builder: (context) {
    return GroupDetail();
  }),
)

When I try to use Group group = Provider.of<Group>(context); in GroupDetail or a child widget of it, it says that it cannot find any Provider for the context.

Here is the repository.

like image 908
Setscha Avatar asked Oct 22 '19 05:10

Setscha


Video Answer


1 Answers

I figured out how to do it. I used a package called custom_navigator.

In sidebar.dart I changed the child when someone changes to the group view to the following:

StreamProvider<Group>.value(
  value: databaseService.streamGroupsFromUser(user.uid),
  child: CustomNavigator(
    home: GroupView(),
    pageRoute: PageRoutes.materialPageRoute,
  )
)

With the CustomNavigator I can still use Provider.of<Group>(context) to get the data, even after a Navigator.push().

like image 101
Setscha Avatar answered Oct 21 '22 22:10

Setscha