Flutter State Management - The Grand Tour

Take a tour of ten awesome state management techniques in Flutter. Learn how to control the flow of data when building complex large-scale mobile apps with RxDart, BLoC, and more fireship.io/lessons/flutter-s...
1. StatefulWidget
2. StatefulBuilder
3. InheritedWidget
4. RxDart + BehaviorSubject
5. BLoC
6. Redux
7. Mobx
8. Scoped Model
9. Flutter Hooks
10. Firebase
Flutter State Mgmt Guide flutter.dev/docs/development/...
Bloc pub.dartlang.org/packages/flu...
RxDart pub.dartlang.org/packages/rxdart

[@hasansalim1868]

After two years, this very important video starts getting old. With libraries being updated may be it is time for Fireship to revisit this topic. Thanks for your hardwork. A very nice channel indeed.

[@jackrdye]

Yes update vid please :)

[@arvidd]

Sounds good to me 🙂

[@umairahmed522]

[@kairos_moments]

yess, update please

[@FelipeCampelo0]

Up

[@friebetill]

1. StatefulWidget 1:25 2. StatefulBuilder 2:43 3. InheritedWidget 4:16 4. RxDart + BehaviorSubject 6:12 5. BLoC 8:50 6. Redux 11:34 7. Mobx 11:57 8. Scoped Model 12:27 9. Flutter Hooks 12:58 10. Firebase 13:22

[@sadhlife]

Should've mentioned Provider. it's simple and solid, and much like the scoped_model library but much more popular

[@friebetill]

@@sadhlife Yes, I agree, although at the time the video was released, Provider was introduced by the Flutter Team at the Google IO 2019. kzbin.info/www/bejne/mpDQZpapoteZbas Therefore one cannot blame Fireship for not presenting providers then. However, by now Provider should be mentioned via an overlay, because Provider is the standard way to manage the state in Flutter.

[@sadhlife]

@@friebetill i see, didn't know, and yeah!

[@mehraanakbarii]

Should we know all of them?

[@friebetill]

@@mehraanakbarii Definitely not, start with a simple one e.g. provider and then you can still upgrade to more powerful systems if necessary.

[@sadabwasim9850]

Fireship is becoming one of the best tech channel, It's content are simply amazing.

[@Fireship]

Thank you Sadab!

[@johanemerson307]

sorry to be so off topic but does any of you know a method to log back into an Instagram account?? I somehow lost the login password. I appreciate any assistance you can give me

[@londonsonny6112]

@Johan Emerson instablaster ;)

[@johanemerson307]

@London Sonny I really appreciate your reply. I found the site on google and I'm in the hacking process atm. Takes a while so I will reply here later when my account password hopefully is recovered.

[@johanemerson307]

@London Sonny It did the trick and I finally got access to my account again. I am so happy:D Thank you so much, you saved my ass!

[@nagas_dev]

One of the best videos, demonstrating most of the ways for state management. You got my attention with firestore as a state management option and I really want to watch a video about it, explaining how can be used.

[@rubensdemelo]

Best video about state management with flutter. Congratulations !!🎊

[@Fanaro]

Thank you for stating that the web benchmarked way of handling state, i.e. rx with basic streams, is your favorite way. It gives me confidence that I can handle Flutter state management with what other fields already use and don't have to reinvent the wheel over again. And stating that Firebase is already a huge solution for 99% of state management is also very important, and something most purists frown upon.

[@emmanuelogbewe2334]

Man I’ve been waiting for this. Has to be one of the best vids on state management. Thank you!!

[@JonWood]

Never knew there were so many ways to handle state management. Thanks for explaining each of these techniques!

[@AndreaGiacon]

Finally: a clear explanation of states management. Thank you

[@Quintusvw]

A very useful overview of state management for developers on a time-constraint budget. Thanks for the introduction!

[@CaiCruz]

State management is a fairly new subject for me, but from first impressions of using redux in angular, I'd say is very complicated to try to mitigate issues that could be solve in different and simpler ways. Thanks for the video. Your channel has some great info! :)

[@mrbbot]

Wow! Great video, nice to have all the different methods concisely explained in one place.

[@dhiyaaulauliyaa3988]

Good video! This video uploaded at just right time for me when struggling to understand flutter. Flutter hook looks promising for me btw. Love the flutter t-shirt 😄

[@alithejumbo]

Dude your way of teaching is the BEST I have ever seen. Fast, clean, simple and straight to the point. Why don't you make Udemy courses? If you do please tell me about them.

[@nikhi1]

Behave responsibly with the state!! Awesome intro to all the patterns for flutter. 😀😀

[@lvl4ul2i]

I love your channel you are very concise and you talk about what really matters

[@yeakleang]

Finally! I've trying to understand the state management in flutter for a few days. Thank you.

[@alexandrsmith6909]

Thanks for one more amazingly useful video during my learning stage 👍🏻 keep it up 🖐🏻

[@remoteportal]

You are the BEST! quick, to the point, not discussing your vacation to Florida and wasting everyone's time

[@TheBadFred]

Very good for an overview of state management in flutter. Flutter hooks and scoped model was new to me. It is good to have the choice.

[@abhishekdewadiga1113]

Nicely done!!! All the possible state management approaches for a flutter app. 👍

[@andreujuanc]

Just getting started with flutter. This helps a lot to clarify issues. Thanks!

[@stevenzhang7582]

I'm confused by state by I think I'm getting the hang of things!! Thanks for the tutorial and love that flutter t shirt!

[@NatiTessema]

Glad I found this video before starting. You da man

[@VictorKun]

I'm amazed by the fact that you know so much, I keep wondering about the effort it took for you to reach there. :) Great video and work. Cliche...

[@darshangowda309]

Thanks for making a list of every solution at one place! BehaviourSubject & RxDart looks super neat and pretty much solves every problem :P

[@Fireship]

BehaviorSubjects are amazing :)

[@beratsulimani9823]

State managemet is a data workflow of your application. Love this T-shirt

[@DanielTubul]

such a long video but passed so fast = A really good one!!! thanks for that

[@willysvarela1254]

Awesome video

[@RobertBrunhage]

Wasn't aware of the get_it package, will definitely check it out. Great video! Wished I had this video when I started haha

[@happynewyearw]

Check out this blog about get_it + rxdart/rxcommand: www.burkharts.net/apps/blog/rxvms-foundations-rxcommand-and-getit/ Looking forward for more awesome videos of practicle demonstration base on these tools from you too! Great job, Thanks!

[@madhankumar5231]

Clarified my doubts about the state management in Flutter. Thanks a lot.

[@kishansampat4632]

By the way thank you for your videos I went to your website and started learning too It helped us a lot in building our first app deliverable within weeks

[@TheRedDaren]

Just when I got into Flutter. Perfect timing.

[@veda_dom]

Thank for this video, you helped to realize the others. Thanks for fireship too.

[@milindgour2526]

I am lucky to find this channel ...😅😅👌👌👍👍 , really good content , I was Soo confused before , but this videos are really helpful , please keep uploading

[@leonardoventocilla3275]

Awesome video and explanations!! This is the best I´ve seened about this topic hard topic. My option is with RxDart. Great flexibility. The video made it clear for me because I thought that RxDart and Bloc was the same thing. I didn't know about the flutter hooks, I´m going to find out about it.

[@MichaelRichins]

I for one am a huge fan of Behavior Subjects. Both in Angular and now in my new love of Flutter.

[@Fireship]

BehaviorSubjects FTW!

[@aviad4]

Like your videos, short and informative.

[@VivekMore1]

I love your small and succinct videos

[@merthyr1831]

Great video, but a 2022 version would be awesome! Almost everything after the starter app/stateful widget are mostly unused now :)

[@maxwellnderitu]

Great content as usual. Still relevant in 2021 👍

[@deriegle]

Thanks a lot for the video. I loved the explanation. I think I want to try out the Bloc pattern. I use redux in my current react native project, but honestly I try to avoid putting anything in redux if possible, because of the boilerplate. I definitely like the look of Bloc pattern in Flutter and the T-shirt! Hope I win it. Thanks for the awesome video.

[@DevKhalilKhalil]

Thank you very much for this nice created video, it was really helpful.

[@Carlos_Carrascosa]

I just came across this video, it explains the fundamentals really good. I've ended up using riverpod after doing my research, but it is not mentioned in this video, maybe you could do a new one!! Great channel

[@mmsergi]

What about Provider approach? Is the one that Im using, what's your opinion about it?

[@MrHimanshun]

@Ruwen Höltge I am very new other SM , could please tell me what is a service locator??

[@TimothyNazar]

@@MrHimanshun The service locator pattern is a design pattern used in software development to encapsulate the processes involved in obtaining a service with a strong abstraction layer. This pattern uses a central registry [that's what you typically see in main.dart file in a form of MultiProvider([service1, service2])] known as the "service locator", which on request returns the information necessary to perform a certain task. en.wikipedia.org/wiki/Service_locator_pattern

[@bobthebuilder6715]

@Ruwen Höltge I wish I read your comment 1 year ago

[@SeriesTube01]

I use Provider too. 👍

[@SeriesTube01]

@Ruwen Höltge We know what it is. He is asking why wasn't even mentioned in the video since it is, by far, the most used library for state managemente in Flutter. I'm surprised about that too.

[@dharmang]

Wow i only knew the 1st one. But dang loved the RxDart method!! 💖

[@laxmikantswain2568]

Awesome content about State management!!!

[@mohamedzakria2975]

WOW, super simple, great compression

[@blank-vw2sb]

Fireship is sailing in flutter! it's Awesome

[@lokeshar6649]

Simply superb... Almost you covered everything.

[@MarkVolkmann]

For simplicity, consider using provider which has been recomended by the Flutter team for a while now.

[@huzefatunkiwala5414]

very good information, very helpful , even i don't know 10 state management things , i learn lot

[@divinedela9125]

Great as always.

[@happynewyearw]

Thx for the great videos as always! Hope to get more videos on RxDart + RxCommand + GetIt + Firebase (simple tut or some example app using these packages will be awesome!), this set of packages is the best state management techniques in Flutter based on what I've read and understand, if I'm wrong please tell me, I'm pretty new to all of these, so I would like to learn more! btw, really thanks to Frank Pepermans, Brian Egan and Thomas Burkhart , these Flutter/Dart packages really makes me exited and joyful to build app in Flutter!

[@Fireship]

Very thankful for their contributions! Have not used RxCommand yet, but looks interesting :)

[@happynewyearw]

@@Fireship Cool! definitely take a look if you can, check out the author's article here: www.burkharts.net/apps/blog/rxvms-foundations-rxcommand-and-getit/ I've been looking for more videos or article about RxDart + GetIt + Firebase, but no luck for now, look forward to see more people start to use and showcase these combination of packages!

[@junhuh8940]

Good compact well explained about alternatives available for flutter state.

[@lunargixx6867]

Fantastic video about state management

[@juliancorredor1128]

I think state management makes easier the development of reactive uis, it helps a lot with dealing things like setState or manually re rendering the hole or widget when you may only need to render a specific small portion of it. On the other hand, helps sharing information across a wide component or widget tree which is a huge advantage

[@Fireship]

Sharing data easily has always been a big one for me, makes prototyping way faster imo.

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@anashashim]

Awesome explanation 🔥😍👍

[@andrewgoeden103]

I am a personal fan of Firebase because of its adaptability and the ease of integrations. It is definitely a little buggy since I last used Firestore in Flutter (February 2019) but a great POC item.

[@kaushalyaroshan]

Great content with nice animations🤩🤩

[@faaf42]

In case you wonder syntax "stream$" at 7:13 it's medium.com/@benlesh/observables-and-finnish-notation-df8356ed1c9b (observable - convention for naming it)

[@gregcounts4021]

Bravo, very well done!

[@itsmeaayush]

Love your Flutter Tutorial.

[@Fireship]

Thank you :)

[@lutaseb]

Only used NgRx and it believe there s a lot of boilerplate especially with the effects. Plus the state tends to grow in size as you use the app

[@soulninjadev]

my god! I was searching for this yesterday 😭

[@kamranbashir4842]

01:57 I can't stop myself to press ctrl+s to remove that round ball with main.dat indicating that file is not saved.

[@danielsolomon6227]

I think it's time to revisit this topic because I waiting to learn about Provider and Riverpod.

[@RagoDN2]

There are so many choices! The best choice for the apps I work on is probably gonna be "scoped_model" because it's lightweight and single-purpose. That said, I'm not opposed to giving Redux or MobX a try.

[@happynewyearw]

Try rx and stream, it's super powerful and reactive programming apply to most programming language!

[@g-tensolution8527]

This is gold 😍😍

[@pardipbhatti9943]

Thanks for the video. I just got pro membership at your site.

[@maxmeza4350]

Nice tutorial the best!

[@nikhilchaudhary8791]

Its really helpful for me 👍

[@santerek28]

Great video !

[@shubhamjaiswal3029]

Amazing Video Man!! ;)

[@hasanimam82]

Great video, almost covered everything about state management, Thanks! My thoughts: - I've never heard about StateBuilder and that it can be used with StatelessWidget, which can really be helpful sometimes. - i didn't know that we should use SetState function inside the Inherited Widget, is that necessary? - you probably didn't mention the Provider and ChangeNotifier classes because they came after this video, but they're quite an extension for ScopeModel class. - My favourite approaches for state management are: Provider, Bloc and get_it, or maybe a mix between two of them.

[@benjieming7232]

The provider is maybe the best solution for state management for me.

[@FredvanRijswijk]

Now I feel stupid ;-)

[@Fireship]

This video took a lot of effort and testing, state management is hard.

[@kirill4531]

I'm glad I'm not the only one here))

[@osamabadr9458]

Same feeling here 😭

[@UlyssesAlexandreAlves]

I'm totally with you there, bro.

[@SeriesTube01]

I remember like a year ago I bought this web development course and the Redux and Hooks sections were explained for like a 5 year old. Still I didn't understand jack shit. 🤦‍♂

[@MultiTelefono]

thanks for the video!!

[@jeromestsauver]

Yes! Thanks for this

[@emericgnonhoue7029]

Great content. I think I'll go with BLoC

[@Fireship]

Not a bad choice :)

[@jeisy8153]

Nice video, I also got into push recently... Still experimenting with networks but so far MonadPlug is the best...

[@veda_dom]

I have been using flutter_flux, it is simple and understandable.

[@bascelik91]

I really like Bloc state management, compared to Redux, you can create as much bloc objects as you want and you can get fine grain control in the app. Also, Mobx is pretty funny state management library, it reduce boilerplate code in the app and it is easy to maintain the code. These two libs I used in several projects and they are pretty reliable and easy to use.

[@politicallynotcorrect2968]

I think something like vuex is very simple to understand and still very powerful

[@lucavenir5308]

I guess this video is just outdated, but as a Flutter Developer I mainly use Providers, which are (imo) the best Inherited Widget wrapper, less error prone, in which you can decide if you actually want to listen to changes or no. Another Widget I use a lot and I didn't see in this video is the Consumer Widget. That's just too easy to use and I highly recommend it (but it listens to changes by default).

[@narcodico]

BLoC/flutter_bloc is the way to go for local state and Redux/RxDart way, for global state. The rest is just for basic state management when you don't expect your app to grow. I didn't know about the flutter hooks package, but looks really interesting.

[@Fireship]

I would agree with you here, it's nice to to have the flexibility of both.

[@Dorumin]

I've personally found redux awkward to implement, and stream-based solutions wasteful (I know that dart is optimized to build lots of immutable objects and dispose of them quickly with its GC, but I've never trusted it too much :P) I like the simplicity of scoped_model because you don't have to implement whether the widget should update when you consume it, and you can still have a singleton with other models so you can do stuff like serialization and persisting the data. I'm not saying that it's the solution for everyone though, persistent storage is just a weird requirement I have

[@Fireship]

@@Dorumin Scoped model is really awesome, that's probably why its in the official docs now. Personally, I like my streams because they can controlled and monitored in predictable ways, and just feel right with realtime data sources like firebase.

[@narcodico]

@@Fireship Yes, often enough, it's recommended to use a combination of available state management solutions based on your needs. There will never be one fits all case.

[@narcodico]

@@Dorumin Stream-based libraries and reactive programming are the best thing that ever happened in software development. You are severely underrating the true power of Rx and co. Completely changed the game for how apps are architectured and built.

[@bharathravi7820]

Waw! always wondered how to manage state in the flutter. It's great!

[@Fullstackdesign]

Good job on the video, I know how much time and effort it takes to make these videos. As for state management for a prototype, would you recommend using BLOC?

[@Fireship]

Thank you, this video was extra challenging. Bloc might be more than you need for a prototype, scoped model or a simple stream might be easier.

[@vinayrwt]

Now we have Get library which is really amazing 😃

[@idemchenko-js]

The Elm Architecture is the godfather of redux and bloc and similar. I personally can distinguish two overarching ideas for state management: state-action-view or FRP. Web devs went through this, now it's flutter's time. However, Elm also used to use FRP but moved on as it didn't scale.

[@akshattamrakar9071]

I liked elm but no company I worked at and no developer I know is using elm.

[@idemchenko-js]

@@akshattamrakar9071 regardless of that, the elm architecture has made a massive impact on the industry.

[@TurtleWargaming]

What state management strategy would you recommend for the scenario described at 4:12? I'm currently stuck on a project trying to figure out a good solution. The siblings are a list of users, and when tapping one of the users in that widget, it should somehow give that user object to its sibling "form" widget, to prepopulate and edit.

[@xtraszone]

// ! RxDart Cheatsheet // Step 1: Create global variable BehaviorSubject counter = BehaviorSubject.seeded(0); // Step 2: Access variable inside StreamBuilder StreamBuilder( stream: counter.stream, builder: (context, snapshot) { return Text('Count: ${snapshot.data}'); }, ) // Step 3: Modify the variable counter.add(counter.value + 1); // Step 4 (Optional): Close the stream when not required @override void dispose() { counter.close() }

[@akshattamrakar9071]

Yes, that's pretty much correct... Easy and straight forward..

[@siddhantkumar7036]

Ha! State management ..... Hard to learn but this video helped!

[@Fireship]

Sometimes it's only hard if you make it hard, focus on keeping it simple :)

[@pramodrocks3904]

That t-shirt rocks , anything for the t-shirt

[@omaritookof5606]

You are the best 😂❤

[@emmanuelogbewe2334]

Great video!! When we have multiple classes like Counter and we are using GetIt do we call registerSingleton for all of them ?

[@rakeshlahkar7313]

Awsome !!!

[@saquibalam9768]

I understood it after watching the video..😉

[@MCorpJC]

Provider is missing in the list 🙂 good video

[@fille.imgnry]

IMHO the built in StreamController is a very solid choice. Not sure why it was left out in this video.

[@Fireship]

BehaviorSubject is the Rx equivalent to a StreamController, I probably should have mentioned that :)