I'm building a basic Flutter app with Bloc pattern. This is my structure so far.
MainProvider contains the Repository, which I can pass in every Bloc of every sub page (one Bloc per page, basically).
The problem is that, if I want to access MainProvider like this:
final provider = MainProvider.of(context);
from MenuPage, or OtherPage, which I access to by navigating from HomePage with
Navigator.push(context,
MaterialRoutePage(
(context) => MenuPage(homePageParam); //or OtherPage(homePageParam)
);
the .of method returns null.
How can I properly access that InheritedWidget? Should I do another type of Navigator.push?
Related
I'm trying to implement deep linking in my web app but I also need to pass some objects to the newly opened page. I found this documentation
https://docs.flutter.dev/cookbook/navigation/named-routes where it says I need to define routes in the MaterialApp which is understandable but in the example where they initiate a page change they only use the route name and it doesn't seem to be possible to pass an object to the page widget.
Navigator.pushNamed(context, '/second');
What I'm doing for now opens a new page widget and the new widget receives an object as an argument but this doesn't support deep linking.
My OrdinaryButton class:
OrdinaryButton({super.key, this.text, this.goto}); // the goto argument gets an instance of the next page to go to
Widget? goto;
...
Navigator.push(context, MaterialPageRoute(builder: (context) => goto!));
How can I implement deep linking with passing objects to the new page (preferably without any extra Flutter packages)?
The official Mobx documentation for Flutter says that in order to transfer data correctly, you must use a Provider and refer to the context to retrieve the data.
But why can't I just call the Mobx class at the root of the application and access the global variable to get the data?
CbtStore cbt = CbtStore();
void main() async {
runApp(const MyApp());
}
Why should I be doing this?
void main() async {
runApp(MultiProvider(
providers: [
Provider<CbtStore>(create: (_) => CbtStore()),
],
child: MyApp()));
}
And how do I refer to Mobx inside the widget methods in that case, for example, if I want to call the action in the Mobx class in initState method? Now I do it in the following way. But when using Provider in initState there is no context.
#override
void initState() {
cbt.init();
super.initState();
}
Provider is used only for dependency injection with mobx. It is not used for state changes.
Now when you are using mobx you don't need a stateful widget in most cases because you are handling your state changes inside your mobx store and if there is any changes in the state we use Observer to change ui.
if want something to initialise with the screen than prefer using constructor of mobx class rather then initState.
for example,
class MyStore = _MyStore with _$MyStore;
abstract class _MyStore with Store {
_MyStore(){
getData();
}
}
Now don't use global providers for your all of store. Only Initialise a provider whenever you need it. So when you push a route wrap it with a provider so that Provider.of(context); can find it. Only use global store if it required globally.
You mentioned creating an instance of store to use it. When you initialise a store in stateless widget it, the data will get destroyed when you close the screen and when you reopen it everything will start all over again. It is useful when you don't need to maintain state after screen pops. It will based on your use case.
You should do what works best for your use case.
The reason why providers are useful is that they can be provided where needed. This could be in the application root, but also somewhere deeper in the widget tree.
Another advantage of the providers is that you can have a provider that notifies listeners. Widgets will rebuild automatically in this case, which can be useful if you have stored and need data to update everywhere in the application.
The initState does indeed not allow the use of providers directly. There are 3 solutions for this:
Don't have the provider listing (Provider.of(context, listen: false); This allows you to use the methods, but not listen to changes.
Use the provider in the build method, using the consumer.
I am by no means an expert on flutter, but this is just what I have experienced so far.
Working on a Flutter app, I am handling deeplinks with a SDK for which I am given a listener that I must handle as soon as the app starts, therefore in the main().
Once a deeplink is received, I must navigate to the proper screen, based on the parameters passed along the deeplink data.
Since I receive the deeplink in the main function, I am detached from the Context of the app, therefore to access the NavigatorState I used a navigation singleton with a GlobalKey passed to my CupertinoApp's navigatorKey. I later use this key to retrieve the NavigatorState and call push. (instead of Navigator.of(context)....
However, if opening the app from a deeplink, it is very likely that the navigatorKey does not contain anything (yet).
How can I detect/wait until the Navigator is ready ?
As of right now my approach is to add a WidgetsBinding.instance.addPostFrameCallback in my App's initState, that resolves a promise to indicate when the GlobalKey pointing to the NavigatorState can be used... I'm sure there is a beter way to achieve this.
For this i make the initialRoute as a Loading screen and execute all my logic inside it , that way i can have different initialRoutes and i don't have to worry about not having MediaQuery, or Navigator, or even ThemeData.
However the question specifies a way to know if the navigator is available, for this i would use the builder function of MaterialApp/WidgetsApp/CupertinoApp, it's used to override the navigator altought i use it to add pading and a global background color and even override the navigator widget with a custom one,
CupertinoApp(
...
builder: (context, child){
//The navigator is ready
Future.delayed(Duration.zero,
() => print(navigatorKey.currentContext)); //We use a delayed since the child needs to be returned first. It's kinda like a hack 7u7
return child;
}
I've been setting up a tabbed navigation app based on this wonderful tutorial (https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf).
Now I would like to display a modal overlay login route that covers the whole screen. My login controller checks if the user is logged in and I would like to fire an event on which the modal login route appears. The problem I have is now, that I don't have a context object where I receive the signal to display the login route:
Navigator.of(context).pushReplacementNamed('/');
How can I solve this or is this the wrong approach?
My User controller is a singleton object that gets initiated at app start. It checks then the user data model and if that is not set, it wants to invoke the login screen / route.
Thanks for any pointer in the right direction.
Martin
Define a navigator key that accesses from everywhere in-app (e.g in main class global space ) and pass it to root MaterialApp navigator key property in the build method
final GlobalKey<NavigatorState> navigatorKey = new GlobalKey<NavigatorState>();
then :
#override
Widget build(BuildContext context) {
return MaterialApp(
navigatorKey: navigatorKey,
//...
);
}
then you can access context everywhere with doing like this:
navigatorKey.currentContext
example of navigating:
Navigator.of(navigatorKey.currentContext).pushReplacement(
MaterialPageRoute(builder: (_) => SecondScreen()));
You could use a globalKey to access the context of the widget u like (you have to pass it a key in the constructor) , and leave it in the global space, or static in any class....
although not the most elegant approach, should work
you can use this package to skip the required context.
https://pub.dev/packages/one_context
// go to second page using named route
OneContext().pushNamed('/second');
// go to second page using MaterialPageRoute
OneContext().push(MaterialPageRoute(builder: (_) => SecondPage()));
class App extends StatefulWidget {
....
return HomeProvider(
homeBloc: HomeBloc(),
child: MaterialApp(
home: HomeScreen(),
),
);
class HomeScreen extends StatefulWidget {
HomeBloc homeBloc = HomeBloc();
}
From the above two scenarios, Most of the tutorials I read, is using the first option. Is the second method completely wrong? or does it have any negative effects in-app?
I can see one difference.
I can access the homeBloc by HomeProvider.of context in the first method. For the second method, I have to pass homeBloc in all the widgets.
Sure, you can use bloc without a provider. But if you share 2 screens with the same bloc, the stream value inside the bloc will be different, because you don't use the InheritedWidget (usually in a provider). The function of a provider is to provide your bloc with InhteritedWidget, so that multiple screens could access to the same stream.
It is definitely possible. I using a single bloc for my entire application right now (as I have come from react-native redux, apollo background, single source of truth makes more sense for me). An example is like below. You can declare your single instance of bloc and import it wherever you use it so you refer to same instance.
class Bloc {
/// Your Bloc Stuff
}
final bloc = Bloc();