CODEWITHSUNDEEP
flutterflutter-providerflutter-state
Noor
Noor

Reputation: 20178

How to allow Flutter "nested" state management?

In short, I have three levels of ChangeNotifiers, the top level, intermediary level and bottom level. Naturally, bottom level is dependent on intermediary level and the latter dependent on the top level.

My questions are:

  1. Is it possible to achieve this using the Flutter Provider plugin?
  2. If Yes, when using the Provider plugin, is it possible to achieve this using only ChangeNotifierProvider only?

More detailed scenario

In my Flutter application, the state is logically structured in several levels. At the top, I have the Configuration state that stores all the configurations of the app. Then, I have a DirectionState and a LocationState, both of which are dependent on the Configuration state and should be notified of changes.

Then, I have my views (UIs), that is basically structured into a Stateful widget class for encoding the logic of the UI only, and a UI model class for implementing the business logic of the UI, somewhat the state of one UI only. The latter class implements the ChangeNotifier so that the UI updates everytime its model changes. That part is pretty simple.

It becomes complex when each model's UI is dependent both on the DirectionState and a LocationState that is then dependent on the Configuration state. All UI's model should be able to change the Configuration state that should then have all effect on the entire tree. Similarly, a change in both the Direction state and Location state should affect all UI's model and ultimately the UI themselves.

Upvotes: 0

Views: 427

Answers (1)

Adrien Audouard
Adrien Audouard

Reputation: 65

With the Provider package a Provider widget will provide to all of it's children an object (we can call it a state).

With context.read<MyType>() you can retrieve the value of one of your providers.

Also calling context.watch<MyType>() inside a build method will rebuild your widget when the provider changes.

In your case we can image this structure:

Provider(
  create: (_) => Configuration(),
  child: Provider(
    create: (_) => DirectionState(),
    child: Provider(
      create: (_) => LocationState(),
      child: ...
    )
  )
)

Also you should check the Bloc library witch make the state management easier than the Provider library. (Bloc is based on the Provider package)

Upvotes: 1

Related Questions