Let’s dive into the journey on how an app typically gets developed! So usually, apps start off with a very sophisticated product design diagram to tell you how your app is laid out. And this is given to developers on a napkin,
And then the next thing that’s expected is, you build the app!
You may laugh, but that probably happens more than we’d like to admit.
And with Flutter, that’s not entirely inconceivable in that with Flutter and Flutter’s way of handling composing UIs. You have to handle data flowing through your app, changing state & widgets interacting with other widgets. Getting this wrong at the very beginning is a very costly mistake to make.
With this blog, you’ll be armed with the tools that you need to be able to make an effective choice at the very beginning. So get ready!
Table of Content :
Pragmatic Way of Managing State in Flutter
Journey through different approaches in state management
Different Flutter State Management Techniques
Pragmatic Ways of Managing State in Flutter
- ✅ Understandable/readable / maintainable
- ✅ Testing
- ✅ Performance
- Understandable/readable/maintainable — Your UI and your app is going to evolve over time. Therefore, the way you manage the state needs to evolve with it. It needs to be flexible and malleable, so you don’t end up with a spaghetti mess, as you iterate on your UI.
- Testing — test state when you want to see its effect on UI and vice versa.
- Performance — A means by which you can build in the state that will give you good performance, but you always need to be aware of the edge cases.
State Management
If I have a widget, and I want to change its state from somewhere outside of that widget, either from another widget, or from the network, or a system call.
Journey through Approaches in State Management
Demo Application
So let’s build a very simple app. It shows the pie chart, and there is a slider, All we want to do is change the state of the pie chart in response to something happening in the slider.
If we look at the very simplified widget tree,we have, basically, only three widgets —
- Homepage
- MyChart
- MySlider
And my slider wants to change the state of my chart.
So we do something that we call in any declarative framework lifting state up. So we lift state up using — my schedule
As soon as slider change —
- Instead of going to my chart directly, it goes through my schedule. It asks for my schedule and tells it,
hey, you know what? I was tapped, and this value changed
- My schedule is responsible for notifying its listener. So it notifies my chart,
hey, something changed, and my chart redraws
- It then goes down to my slider as well and says,
hey, this thing actually changed, and then it changed to my slider
Different Flutter State Management Techniques
- Scoped Model
2. Bloc
3. Provider
This is what we are going to discuss in brief !
provider | Flutter Package
English | Português A wrapper around InheritedWidget to make them easier to use and more reusable. By using provider…pub.dev
Add this in your dependencies in Pubspec.yaml. This will automatically get the latest version of provider
provider :
There are three components related to this Provider State Management that we need to understand —
- ChangeNotifier.
- ChangeNotifierProvider
- Consumer
Change Notifier adds listening capabilities to my schedule. So now, we get add listener, remove listener, dispose. And hey, I can notify listeners when things change. Since we added a lifting state up. So we lift state up using my schedule
https://gist.github.com/Anirudhk07/28e0fb792e52e25aa4175d9474452ff6#file-schedule-dart
The Most Important thing is calling notifyListeners(), whenever you change the state data in ChangeNotifier. If you will not call this method, the state change would not reflect in the UI. The method notifyListeners() tells flutter to rebuild the screen which is using that ChangeNotifier.
https://gist.github.com/Anirudhk07/39dc44df9a91e610ce97f308d8873c33#file-chart-dart
It is not necessary that all the part of the UI in MyChart will be using the state data from MySlider , and thus needs to be rebuit. It may be possible that 50% of the UI of any screen, not in our case, not needs to be rebuilt. So, Consumer, which is a widget, allows to observe the state changes from ChangeNotifier in a particular part of UI, and thus only observing part of the UI will get re-rendered.
So with this now MyChart dynamically changes with MySlider !!!
For Disposables / MultiProvider head over here —
disposables | Dart Package
Simple library to manage objects needing to release its own resources. final sink = StreamController(); final…pub.dev
Happy Fluttering !! ❤
Resources
flutter-devs/Provider-State-Management
Provider State Management in flutter using a demo application – flutter-devs/Provider-State-Managementgithub.com
provider | Flutter Package
English | Português A wrapper around InheritedWidget to make them easier to use and more reusable. By using provider…pub.dev
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
