Provider with StateNotifier - Easy State Management for Flutter

You're probably familiar with ValueNotifier and ChangeNotifier. But have you ever heard of StateNotifier? In this tutorial we go over a simple example showing how you can use StateNotifier in your Flutter applications to easily manage state.
Written Tutorial: blog.funwith.app/posts/provid...

[@nullsafedev]

Unmistakable South African accent! Awesome :) Your videos are great, I hope you keep making them! Its awesome hearing such a familiar accent explain these concept :) Have a great Friday, and a great weekend!

[@FunwithFlutter]

:) love it when my countrymen/women recognise my accent. Will definitely keep making vids. Thanks for the message. Cheers

[@hninnwe6015]

Thanks. This video series help me a lot.

[@FunwithFlutter]

Happy to help

[@yaizudamashii]

In summary 1. StateNotifierProvider provides both the provider and the state 2. When the state is modified, subscribers are notified 3. By using LocatorMixin you can use other providers inside an implementation of a StateNotifier

[@greglee7708]

Hey, that was useful, thx! And what is the font that Ur using?

[@FunwithFlutter]

Can't remember haha. Maybe it was the Microsoft code font

[@sommie4935]

😭😭this is making me emotional I've finally understood basic state management.. I have one small noob doubt though, if I were to have a more complex state, how am I supposed to structure it, say a TodoList app, with multiple lists of Todos like urgent, not-urgent, Am i supposed to use a single state class that will hold these two lists or just two changeNotifiers with two seperate lists? sorry if my question is silly..

[@FunwithFlutter]

There is no set way that you have to manage the state. You should do what works for the situation. You can have to StateNotifiers that have separate lists. Or you can make a new state class. For example: class TodoLists{ List urgent; List notUrgent; ... } and then use the TodoLists class as your state in the StateNotifier

[@DarrinSmith1]

So you are using a single primitive (int here) to check the state on. What about a class containing multiple fields? Could you have it so that any change within that class caused the notification to be fired without having to set this sort of thing up for each and every field? Take for example a car class where we have make, model and color. Are we required to set up a StateNotifier for make, another for model, and yet a third for color? From the example it appears that is the case, but surely there is a work around right?

[@FunwithFlutter]

Of course, everything in dart is an object. Just swap int for your custom class and replace the old state value with the object that replaces it: For example: ... class MyState { MyState(this.count); final int count; } class MyStateNotifier extends StateNotifier { MyStateNotifier() : super(MyState(0)); void increment() { state = MyState(state.count + 1); } ... } ... Dart doesn't support Data classes (yet), so I recommend you take a look at the Freezed package which can generate unions as well as data classes (plus immutability). Then you can easily create objects from other objects using "copyWith". So if your state class contains a lot of fields you don't need to set them manually. You can then do something like this when you only want to update one field: ... void increment() { state = state.copyWith(count: state.count + 1); } ... This seems like more work than needed, but you get a lot of benefits when you keep you keep your state immutable and separated. And with Provider if you only want to listen to parts of an object changing then you can use Select instead of Watch (or Selector instead of Consumer widget)

[@elgrego3849]

How implementes initsate in provider?

[@duttaoindril]

How is this better than ChangeNotifier as you claim? 🤔

[@FunwithFlutter]

You'll see I list a couple of benefits in the beginning of the video, for example performance improvements. You can read the package readme for more (the package is made by the same person who made Provider). What I like the most is that StateNotifierProvider exposes both the Notifier and the State separately and that it is better integrated with provider by using the LocatorMixin. It also "kind of" forces you to not make your Notifier class a mess of state and logic all tangled together. If you make the state object Immutable you get those benefits as well. The state is seperated from the Notifier (to some degree) and is protected by default so that it cannot be modified outside of the provider. There are also nice convenient methods, such as initState, or overriding set state (as I show in the video. Also no need to call notifyListeners. It abstracts stuff that you might otherwise do on your own.

[@ankitrathore3946]

You guys are always talking about packages . Why you dont talk about the core ..

[@FunwithFlutter]

You're welcome to use Inherited Widgets instead of Provider. These packages make it easier. But to each their own. You'll probably learn more by reading the source code for Provider and see what it abstracts, and then you can use "the core"