Pragmatic State Management in Flutter (Google I/O'19)
Вставка
- Опубліковано 22 лип 2024
- Declarative UI frameworks eliminate whole classes of bugs. But they can also be a puzzle until you figure out how to structure your app logic around them. Walk through Flutter's app with live data and see how to structure content in a simple yet scalable way. You'll come out understanding the main approaches of state management in declarative frameworks and have a concrete applicable solution.
Watch more #io19 here:
Flutter at Google I/O 2019 Playlist → goo.gle/2ZTbnOs
Google I/O 2019 All Sessions Playlist → goo.gle/io19allsessions
Learn more on the I/O Website → google.com/io
Subscribe to the Flutter Channel → goo.gle/Flutter
Get started at → flutter.dev/
Speaker(s): Filip Hracek and Matt Sullivan
T0CEDC event: Google I/O 2019; re_ty: Publish;
I'm so happy that you guys decide to keep talking about state at these conferences.
Believe it or not this video was my first interaction with flutter when I began my journey in May 2020. It was unbelievably complex but I'm glad I dint give up. I've been a fan of Filip ever since.
19:40 I just love how the attitude given towards community packages 😊
By far the best flutter talk i have seen.
funny, weigh's alternative methodologies and very educative.
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.
Don't be sad Matt. I wear the same pajamas while watching you last year.
so funny ...
Güzel espri reis Cem Yılmaz la bi akrabalık var mıydı?
Funny you guy
Love their style of delivery, makes the video very enjoyable along with being informative
i watched this piece and really love it.. the delivery and explanation of the concept was top notch. this will definately help and aid my journey of becoming a flutter developer. thank you google
One of the best talks. Fun, technical, and cool
Currently at 14:00 and crying into my cornflakes as just finally got to grips with Bloc pattern and now a new reccomended approach.
If you like Bloc, stay with it!
I believe the point is if you have trouble with Bloc, they recommend Provider and you can migrate to Bloc as you need.
They literally said that bloc was perfectly fine and that they use it themselves. I think this was geared towards users who havnt made a choice yet and are confused by all the options and just want to be told 'use this'.
The final conclusion of this talk was if you feel comfortable with BLoC or Redux there's nothing wrong in using them, there's no golden bullet for Flutter apps architectures.
Can feel ya bud.. But I feel that BLoC will still be preferred for more complicated stuff.
This provider sound much easier than bloc. Would love to see more detailed tutorials.
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!
Hello am John from Uganda East Africa. I have an app idea but i couldn't afford to pay engineers for building it so I started learning programming. But I can't figer out how to store and use the input data form user please help me how do I do it.
@@johnmw170 have you figured it out how to store user data? I would like to know how to
@@elisiosa3111 if you need to store data locally on user's device, think about shared_preferences package or some databases (see sqflite package for example)
Good job, Filip and Matt. You guys came to rescue when I was struggling with stateManagement in Flutter to get hold on it. Now its crystal clear and I know which pattern to go with and when. Choice is mine. Thanks a lot to both of you...🙏
@Matt: Viewer would like to see you in new shirt in upcoming conference.... 😄
Glad to hear this is helping you on your Flutter journey 🚂
Happy Fluttering 😎
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?
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.
I am that much new to Flutter states that even, I found 6:57 really inspiring, and in fact I needed something like this for my recent projects lol
Thanks for the video, it was really fun and informative :)
Great , clears a lot of ambiguity when choosing a state management
It totally sounded like a Redux talk. Great to see Google's state management techniques transforming.
"Thank you very much";
"Great tutorial";
"You're the best", and it goes on and on...
Give honest feedback already!
This is not personal and this applies to most content creators who teach flutter even Google's Flutter official channel, almost everyone is explaining things based on the assumption that the viewer comes from an app development background or that they already have been working with this "standalone" technology which is not so standalone if I had to get acquainted with other languages and frameworks to be able to understand its basics, people who started from scratch (to whom these crash courses should be addressed) are not accounted for whatsoever.
This creates an entry barrier, this prevents the app/web dev communities to prosper and become richer, there may be people who could have had an influence on the current practices if they were taken into consideration.
Again, this is not personal, I'm merely describing reality.
Hope you Google will continue these technolgoies you are putting out, i am so amazed by Go, Dart, Flutter
I feel lucky watching this video as I am two weeks into Flutter!
I just read a chapter "Duplicate Observed Data" in the book "Refactoring" from 1999. As I understood this approach, it is super similar.
Flutter Devs: What you need in state management?
Me: yes!
@MattSullivan What is that modified version of Bloc pattern, could you share some details?
Awesome Provider! I might need this in my last project!
1:00 Story of my (work-) life. i just love these guys!
WOW! I am new to flutter and this video solved my problems!
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: 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, ...(a widget that contains a builder that provides the reference to the model)
b. Provider.of(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
Thank you
ThankYou
THANK YOU
that is What I want in the description thank you !
Of course...
Good video for how to use and link stateful widgets. Thanks a lot!
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)
Great session, thanks guys! Simple question re IDE usage, why are you using vsCode instead of Android Studio?
The notifyListeners() does not work when called from inside an async operation like fetching data from network.
You are doing a great job over there! thank you
One of the best tech reviewing videos i have ever seen. ❤
Thank you so much for the kind feedback, Heshan! We're so glad to hear you enjoyed this 😎
It would be nice if the description has the link to the source code with the complete example of the chart application.
Can anyone tell me, what Visual Studio extensions are they using for the stuff like "Wrap in a component", "Convert to statefull widget", etc.?
14:22 this sentences sound so good!!
This is very good stuff! Thanks for sharing.
Great video! This was amazing.
Love the small parts of humor!
The whole video I was not sure if the fly is real or in the video... btw really nice info. I am starting to love Flutter
I loved the way to presented, Great work
guys this was an awesome talk. Given that it's been more than a year, can you do a state of the art update on Pragmatic State Management? TIA !:)
These guys are awesome! The best on team flutter
Where can I get the code of the Chart and Slider using provider and change notifier from this demo????
i have been search for good architecture for flutter to build my app
i see tdd clean architecture but now i see provider is this is enough to build my app or must use some MVC ????
Thanks for making this scary topic fun and entertaining. I almost forgot you guys were actually trying to teach :) - Look forward to seeing you guys again next year!
The best Flutter duo
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
These guys share a great rapport
Excelent speech, flutter is awesome!
Project page: github.com/2d-inc/developer_quest
What is best state management for flutter as of 2022?
I have a online shop app which has a detail product screen. when user enters, the app should request to backend for detail product. Should i use provider in this case? since i think Provider is a global state management. While i just need the data only for detail screen, not anything else. I mean, notifyListener seems like useless in this case.
What plugin he just used?
Great and pragmatic video.
Great talk. Helped me a lot.......
do you guys have the source code of the presented app ?
Which plugin are you using at 6:30?
Remi Rousselet is awesome for creating Provider
so now we are going to use Hooks and functional widgets, right?
amazing share for provider .
It´s fantastic. Thank you.
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
Try with a small app first
please, anyone, tell me where should I go to get that beanie hat with a flutter logo?
mark~
3:30 what is state management, widget
approaches
pragmatic
what do you think about pub.dev/packages/flutter_hooks ?
is it a good practice to use it ?
thanks.
For Xamarin.Forms developers, this is the nearest thing to the MVVM pattern, ChangeNotifier is like INotifyPropertyChanged
and also the optimized way to check if you should notify or not.
I love these guys
But isn't Provider constantly walking the tree? How's that affecting performance?
is the chart package open-source?
How deal with various booleans in a stateful widget. Is provider really a solution for that?
which vs code package is using?
What about react Hooks??
Hi, i have doubt in provider, i have implemented MVVM architrcture. I failed to redirect the page in Login page after getting api response from LoginViewModel . can you send any reference to overcome my problem.
Remember to turn down your volume after the video ends if you want to preserve your hearing.
Very clear 👏
Verry nice, thank so much 🥳🥳🥳
I Believe Rx is the best since uses Behaviour thingy which unSubcribes by itself on dispose, hence you pass streams to StreamBuilders which dont need to render all the UI and only its subChildrens...
Really cool!
@29:24 haha....was waiting for that. All non-trivial apps that survive will eventually end up with dirty state management.
Hello, please I want to know if it's okay to get a macbook pro with 8gb ram and 256ssd for flutter programming? Won't xcode and android studio run slowly on it?
You will be fine
Big Love to Google Flutter ❤️
Provider vs ScopedModel??
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?
Im also curious about this... in initState() i am sometimes calling 3+ async methods and im not sure if i should chain them and call setState() at the end or use some other approach...
I am using bloc, for global state management..it gives complete control on initial state
So, can we use it to provide multiple bloc to our child widget?
There's also an alternative in the flutter_bloc package, called treeprovider or blocTreeProvider... But it's just a nested bloc inside the other BLoC... Anyways it works like a charm, you can have 5 different BLoCs and the child would be accessible to all of them.
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?
You can, I did for my Startup. But it will take time, start with small apps and then Scale. And don't worry if the very first version you make isn't the best as it's the First not the last 🙂.
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.
Flutter is a fastly evolving framework, always pay attention to the date of the post. If it's > 1 year consider it obsolete. Apparently, Provider package didn't exist back then
I am a totally beginner, self-study. Should I understand it by simply watching to this video, or should I keep learning some more ?
I watch this everytime i forget how to do this. so thats once a week...
So i am in the club now? 😂 I needed exactly this now i can rewrite everything and i just realized you wrote this comment a year ago 😅
How can I get this source code?
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.
Pragmatic State Management in Flutter (Google I/O'19) Example Replica:
github.com/akilaj-oc/hello-flutter/tree/master/2_provider_pie_chart
So if i'm comfortable w/ both BLoC and Provider, for the next big complicated app, should I use one instead of another? I could not deduce pros and cons of these 2 being compared to each other after watching this presentation.
This is what I'm wondering too...
In your experience, which is the most beginner friendly and easy to use approach among the 2?
You can use both. The provider is a way to provide your state to your widgets. If you manage state through a BloC then you can provide that using the provider. The example here shows that. pub.dev/packages/provider#-example-tab-
Use the one you are most comfortable with. They are both great state management tools.
@@junpeiiori4720 package provider is easier then Bloc in my experience.
"We spent a long time thinking about how we could make the title of our talk the most exciting and clickbaity title we could make it"
- Every single UA-camr on this entire damn platform
that was cool
Anybody got timestamps?
Where inside that would you put business logic or network requests?
We're only showing UI code in the talk, and you should try not to have business logic in there. Many people would put business logic in the provided object (the ChangeNotifier). Others might have it separate, keeping the model as simple as possible. I believe this is where we get into the larger questions about state management as "all of computer science".
@@filiphracek Hi, Filip!
Thanks for your answers on even comments with just one like! ) And do you have any lections about this theme? Because every real app is not only UI. It's always a huge chanks of business logic and a lot of models. But for some odd reason, all Flutter pattern talks concentrate only on UI. I'm starting my app now and totally frustrated with this.
Is this a good idea to use the MVC pattern along with Provider where the provider will be a "view" part? Or business logic would have a good fit into Provider so provider would be just a sort of "Controller" and replace whole MVC pattern?
Or it's a "model" as you said at the end of this video?
So hard to make these first steps from another language to Flutter and dart.
Is there a link to the app
github.com/2d-inc/developer_quest