Pragmatic State Management in Flutter (Google I/O’19)

Pragmatic State Management in Flutter (Google I/O’19)


100 comments

  1. Can we add something about package:provider in the official docs? Maybe in the options section? It would help noobs like me get a little more guidance.

    Because looking at many different sources can be overwhelming we love to look at official documentation as a nice guide that holds our hand.

    Awesome presentation btw.

    https://flutter.dev/docs/development/data-and-backend/state-mgmt/options

  2. 29:20 To save you the search for my article, here's the link: https://medium.com/flutter-io/performance-testing-of-flutter-apps-df7669bb7df7

  3. I'm not 100% clear why state isn't just being passed via constructors. The widget hierarchy is recreated on state change, right? Passing data via constructor might be a bit verbose in some situations, but it also sounds like the cleanest, clearest approach as to what data each state needs to render. What am I missing?

  4. This seems way too complex. With the Provider implementation of MySlider and MyChart, both are now tied to a specific model type. They are sliders and charts for schedules only. It would be better if MySlider, had a callback option that will tell MyHomePage that the value has changed. Then MySlider doesn't need to know what it is a slider for. It is just a generic slider. When the value changes, rebuild MyHomePage and send the data to the slider and chart during the build. MyHomePage would tie it all together. If MySlider really needs to be specialized to be a slider only for a schedule state type, why not pass that object in explicitly as a constructor parameter? Then dependency injection is clear. It is just a few characters to inject directly and saves the complexity and limitations of Consumer<MySchedule>(…). Way too much magic.

  5. I've only been using ScopedModel, tried bloc 3 times, all three times I refactored a few weeks in because of all the boilerplate. I'm very excited to try out the package:provider

  6. People who are sad that they did not focus on BLoC and instead showed something else completely missed the point of the talk. Provider is a model that they feel is very useful and polished for a lot of use cases, but you should always choose something that fits your situation. If you feel more comfortable using BLoC or something else, you're always free to use that. Check what Matt says at 32:12

    I'd even argue that the main point of the talk was to advise you to choose your weapons wisely to get both good performance and clean code, and along the way tell you about a new state management solution that you might not know about and which they feel can be very useful.

  7. Thank you for the awesome presentation! Now a real and simple alternative for state management. Source code for the demo?

  8. Good talk. I'm new to Flutter, and since I come from a React background I used Redux for my first Flutter project. It's working just fine, but I'm not entirely sure what the best practices of initial data fetching in Flutter are. How is everybody fetching initial data?

  9. More than a year working with flutter and dart, from those early days to these Glorious times i just saw one thing and that was the absolute art.
    Thinking about development teams and their unbelievable talent and work is mind blowing…
    I believe we shouldn’t call them programmers or developers, in fact they are artists. I think we need to change our perspective of what the art is.

  10. For Xamarin.Forms developers, this is the nearest thing to the MVVM pattern, ChangeNotifier is like INotifyPropertyChanged

  11. I will use it with Bloc, because my current issue with Bloc is providing it through the widget tree, I hope it's efficient in that aspect though.

  12. Great talk. As someone who is very used to MVC from iOS I was confused where to start with flutter. This is a great way to start.

  13. This made me think. I’m not convinced with the provider package too.

    I really think that Flutter team must find a better and simpler way for StateManagement. Flutter is great. I can develop and see the results really fast like never before.

    Sometimes, providing many solutions is bad.

    Especially in this video, even though the first approach was not good according to the Flutter team, I’d rather using it. At least the children widgets don’t have to be descendants of the same widget in the tree.

    These are my thoughts relative to my knowledge.

  14. I've been suffering for days trying to implement a feature in a personal project and I just finished implementing the hardest part of it thanks to this talk and the Provider implementation. Life is good. Thank you, guys!

  15. 1. State Management: When we want to change the state of a widget from outside the widget, i.e. from another widget, network, or system call.

    //Example
    2. In the example the outside entity is: another widget.
    3. Making a global state is not a good idea as:
    a. It Increases Coupling,
    b. Not scalable as there may be more than one implementation of the widget,
    c. Calling set state from outside the widget is bad as we'll have difficulty figuring out who changed the state of the widget in case of multiple callers.
    4. Let the framework help you instead of fighting it.
    5. UI is a function of state in declarative frameworks: UI = f(state) …(f = build methods that declare what the screen should look like at any given time)
    Hence only the state should mutate the UI and not the other UI elements themselves.
    6. In order to deal with our previous problem we lift the state up, i.e. make a model at the level that is accessible to both the widgets.
    7. When the value of MySlider changes, it notifies MySchedule. MySchedule in turn notifies all its listeners in this case, just MyChart and then notifies MySlider that the update was successful.
    8. History of flutter state management:
    a. Scoped model: Implementation of #7
    b. BLoC: Used for large scale applications. Difficult to understand, implement and a lot of boilerplate code, requires knowledge of Rx and Streams.
    9. Currently used: Scoped Model: features a lot of ad-on features to the scoped model.
    10. Mixins: https://medium.com/flutter-community/dart-what-are-mixins-3a72344011f3
    11. ChangeNotifier: adds listening capabilities to MySchedule: addListener, removeListener, dispose…
    12. Lift the state up. Use the ChangeNotifierProvider widget in MyApp as the parent of MyChart and MySlider.
    13. Use the builder in the widget to build the MySchedule model.
    14. Get reference of the model from the Widgets can be done by:
    a. Consumer<MySchedule>, …(a widget that contains a builder that provides the reference to the model)
    b. Provider.of<MySchedule>(context)
    15. Update the model from it's reference inside the widget. For the listeners, update the listeners by the model reference.

    //State "Management"
    16. Disposables: Cleaning up when the widget is getting disposed of done with dispose callback of Provider. ChangeNotifierProvider does the dispose part for you.
    17. Break your state up into different components and classes to keep it simple. Use MultiProviders when needed.
    18. Use anything with the provider, streams, data, whatever

  16. Thank you for this information , but I want to ask you >> I new to declarative framework , and I want to build a big complex app with flutter , which approach will you recommend me to use it Redux or StreamBuilder , and why ?
    Because I don't know which on to use it >> I need advice from expert ..
    Thank you again

  17. Where can I get the code of the Chart and Slider using provider and change notifier from this demo????

  18. The finished example project in the video with some changes in the link below.
    https://github.com/edex96/Provider-Example

  19. Legit just used this as a tutorial on how to do state the wrong way since provider not available on flutter web yet.

  20. When introducing a great package such as provider, I wish the Google Team's entry point was to provide some examples which could be considered basic/intermediate. I just tried comprehending the DeveloperQuest code and got utterly lost when trying to figure out the usage of ChildAspect and AspectContainer.

  21. Hi, I just want to say thank you for providing another mechanism of state management, whose is easier for me and my faced problems. I have tried and really solved my recently faced problems. You all also do a great job for contributing an essential concept and example document on official site: https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple . This helps understand fundamental concepts and do many trials based on it. Thank you.

  22. I just read a chapter "Duplicate Observed Data" in the book "Refactoring" from 1999. As I understood this approach, it is super similar.

  23. new to flutter here, so this means you can create your whole app with providers and static widgets turning stateful widgets useless unless minor local state management?

  24. Maybe in another year or two Flutter state management can begin to come close to Vue's in terms of simplicity and power.

  25. how if i have some routes, and i want to pass the provider to them?? so on destination route i just call the Provider.of(context)

  26. Very good explanation about the State mangament. I am loving the work with provider it's very ease to implement when compared with bloc. But why many people out there and In the medium suggesting the bloc. Can anyone help me out is there any down side in provider when compared to bloc. Thank you.

  27. Just in case you were watching the video on mobile and wanted to "save" the link of the repo of the Developer Quest app, here you go! 🙂 https://github.com/2d-inc/developer_quest

  28. not seeing where this was posted anywhere else but the github link for the app at 20:11 is https://github.com/2d-inc/developer_quest

  29. I have an question, that I have 0 experience in programming language and I want to build the app for my startup, I willing to go learning with flutter, still I can make the apps development with flutter course only?

  30. Can anyone tell me, what Visual Studio extensions are they using for the stuff like "Wrap in a component", "Convert to statefull widget", etc.?

  31. @29:24 haha….was waiting for that. All non-trivial apps that survive will eventually end up with dirty state management.

  32. Where can I learn more about nested notifiers? I really often need to update something small within my ViewModel rather than notifying that my entire ViewModel was changed

  33. Why shows the Google Flutter Team the topic in Microsoft Virtual Studio? Why are they not using Google Android Studio as the IDE? Is there any deep explaining?

  34. Where is the official example? I have tried recreating this project, however the class chart/MyChart has this method (

    static List<Series<_Problem, String>> createData{

    double stateMgmTime;

    }) however it's being called with different parameters and in your app it works, in the example I made it doesn't, at all, it wants to change the input parameters of the method. You didn't even mention the libraries used in this example, especially the PieChart library that I had to look for for half an hour before I found the right one ie the one you used. This presentation is really obscure and might as well floated on the cloud 10 miles above our heads, even better than a presentation would be just a concrete and total example or examples that work.

Leave a Reply

Your email address will not be published. Required fields are marked *