How to implement context free jump in fluent

Time:2020-10-1

Background


Navigator.of(context).push(MaterialPageRoute(builder: (context){
   return DemoPage();
  }));

In the daily project development, we generally use the above method to push a new pageNavigator.of(context)To push or pop.

Disadvantages: in this case, context must be passed in order to make use of itNavigator.of(context)To get the navigator state object, and then push or pop.

If I want to push a new page anywhere in the project, and the context may not be obtained in this place, so at this time, it is necessary to implement context free jump.

Solution

Without context jump, the essence is that it is unnecessary for us to pass the context parameter every time, and then use some operations to directly obtain the current navigator state.

Scenario 1: using globalkey

  • In the fluent, use the golbalkey to obtain the state object of the corresponding widget. Therefore, here, we can get the navigator state object through the key value of a globalkey.
  • In materialapplication, widgetsapp is packaged with navigator, and the key attribute of navigator is exposed as navigator key. Therefore, we can set the navigator key, and then use this key to get the navigator state object.

Here paste the relevant source code, you can see the source code yourself.

Materialapp class:

Widgetsapp class: we can see that the navigator key defined by us is the key value that will be passed to the navigator, so we can go through the key.currentState () method to get the navigator state object here.


class _WidgetsAppState extends State<WidgetsApp> implements WidgetsBindingObserver {

 GlobalKey<NavigatorState> _navigator;

 void _updateNavigator() {
 _navigator = widget.navigatorKey ?? GlobalObjectKey<NavigatorState>(this);
 }
 
 @override
 Widget build(BuildContext context) {
 Widget navigator;
 if (_navigator != null) {
  navigator = Navigator(
  key: _navigator,
  initialRoute: WidgetsBinding.instance.window.defaultRouteName != Navigator.defaultRouteName
   ? WidgetsBinding.instance.window.defaultRouteName
   : widget.initialRoute ?? WidgetsBinding.instance.window.defaultRouteName,
  onGenerateRoute: _onGenerateRoute,
  onUnknownRoute: _onUnknownRoute,
  observers: widget.navigatorObservers,
  );
 }
}

Simple code implementation

1. Define a globalkey < navigator state > object


 static GlobalKey<NavigatorState> navigatorKey=GlobalKey();

2. When creating an object of materialapplication, assign the navigator key to the materialapplication.


MaterialApp(
   navigatorKey: Router.navigatorKey,
)

Use globalkey to get the navigator state object anywhere


navigatorKey.currentState.pushNamed("/login");

Scenario 2: using navigator observer

  • Navigator observer. If you look at the name, it can be used to monitor changes in navigator. For example, when a new page is pushed, the navigator will listen for changes in the navigator state and call back the didpush() method.

be careful:There is a navigator state object navigator defined in the navigator observer, so we can use the Navigator object to do page push or pop operations directly by using the Navigator object. In this way, we don’t have to use context to get the navigator state object.

The materialapplicat class provides the navigatorobservers property, so that we can customize the navigator observer to listen for changes in the navigator.

The navigator state class, when executing the inststate object, will assign itself to the_ In navigator.

Simple code implementation

1. Customize the navigator observer.


class CustomNavigatorObserver extends NavigatorObserver{
 static CustomNavigatorObserver _instance;

 static CustomNavigatorObserver getInstance() {
 if (_instance == null) {
  _instance = CustomNavigatorObserver();
 }
 return _instance;
 }
}

2. When creating an object of materialapplication, assign the customnavigator observer to the materialapplication


MaterialApp(
   navigatorObservers: [CustomNavigatorObserver()],
)

3. Use custom navigator observer to perform page operations anywhere


CustomNavigatorObserver.getInstance().navigator.pushNamed("/login");

summary

The above is the whole content of this article, I hope the content of this article has a certain reference learning value for your study or work, thank you for your support to developeppaer.