[Flutter/dart]Reflect the change of Store even after transitioning with Navigator
Overview
When managing the state with redux, you can use StoreProvider to reflect the change of store in widget. However, the rebuild after changing the store does not reach another page that was reached by Navigator by tapping a button. In this situation, we will explain how to rebuild the transition destination page as well.
Method
Suppose you want to jump to a page that takes a ViewModel (widget.model) that cuts out the store in the onTap event as shown below. In this case, even if this widget is rebuilt, SomePage will not be rebuilt, so even if you change the contents of the store with SomePage, for example, the change will not be reflected in the SomePage widget.
onTap: ()async{
Navigator.of(context).push(
MaterialPageRoute(builder: (context1)
=> SomePage(model: widget.model), //Page using ViewModel
)
)
}
What to do is bring another StoreProvider to this location.
onTap: ()async{
Navigator.of(context).push(MaterialPageRoute(builder: (context1)=>
StoreProvider(
store: StoreProvider.of<AppState>(context),
child: StoreConnector<AppState, ViewModel>(
distinct: true,
converter: (store)=>ViewModel.create(store),
builder: (BuildContext context1, ViewModel model)=>
SomePage(model: model),
)
)
)
);
},
AppState is the class that represents the state, and ViewModel is the class that cuts out the state of the store (create () is the constructor).
Be careful not to confuse the "context" of the argument of Navigator.of() with the "context" of the argument of the builder of MaterialPageRoute. You get an error like No StoreProvider <AppState> found.
Precaution
However, this method does not seem to guarantee the order in which the two StoreProviders will be rebuilt. (There is no source. The result of trying.)
Lastly
Fundamentally, it may not be good as the structure of the application that the contents of the store affect the transition destination. I think it's best if you can change the structure.
Recent Posts
See AllWhat want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to...
What want to do There is a variable that remain unchanged once the initial value is determined. However, it cannot be determined yet when...
What want to do As the title suggests. Place two widgets in one line on the screen One in the center of the screen and the other on the...
Commenti