Build reactive mobile apps with Flutter (Google I/O '18)
Вставка
- Опубліковано 5 вер 2024
- Do you over-react when you hear Streams, Observables, Redux, Flux? Don't. One of the advantages of Flutter is that it uses reactive views, which you can take to the next level by also applying reactive principles to your app’s data model. Through practical demonstration and live coding, learn patterns for crafting elegant and intuitive code and architecting maintainable apps.
Rate this session by signing-in on the I/O website here → goo.gl/aMJQE3
See all the sessions from Google I/O '18 → goo.gl/q1Tr8x
Watch more Android sessions from I/O '18 → goo.gl/R9L42F
Watch more Chrome sessions from I/O '18 → goo.gl/5fgXhX
Watch more Firebase sessions from I/O '18 → goo.gl/TQEeBQ
Watch more Google Cloud Platform from I/O '18 → goo.gl/qw2mR1
Watch more TensorFlow sessions from I/O '18 → goo.gl/GaAnBR
Subscribe to the Google Developers channel → goo.gl/mQyv5L
#io18 event: Google I/O 2018; re_ty: Publish; product: Flutter - General; fullname: Filip Hracek, Matt Sulliivan; event: Google I/O 2018;
![The Boring Flutter Development Show [Pilot Episode]](http://i.ytimg.com/vi/yr8F2S3Amas/mqdefault.jpg)
![The Boring Flutter Development Show [Pilot Episode]](/img/tr.png)
I'm really impressed with Flutter and what it can do but imho state management api is not easy to understand. Event speakers had problem explaining all the details of streams, sinks, controllers. I come from React development world and when I compare APIs, flutter's API looks like nightmare to learn and understand - especially bloc creation part. When I first read React article about state it was obvious after first reading, in Flutter I still don't get why API for creating bloc has to be so complex. I see that it's using several different packages instead unifying everything in one wrapper package with nice API. To be fair, I'm really impressed with Flutter and how easy it's to create beautiful UIs but I think it still requires some work to make it digestible for newcomers.
Keep doing a great work!
I have made an app using setState() and now it is not enough because my app is going to more complex. There is a lot of state management approches. I'm confused. I hope this video will help me.
Streams & Bloc starting at: 18:25
That look they give each other at the start, "Let's do this!"
Very nice. Much cleaner then my state based tutorials on Scoped Model and Streams; naturally because it's the flutter team. I am glad this talk went very smoothly. Great Job Guys.
Your videos are amazing! Looking forward to more videos.
Thank you very much. They are all live coded so I do make mistakes but I am getting better at streamlining the process. I generally post 4-5 videos a week and I anticipate producing Flutter videos for the next few months at least.
My channel covers a ton of different technologies and languages but I try to make a fairly large playlist of relevant information for each technology before moving to the next one. After a certain period of time, I come back to revise things and add more material. Thus far I have covered some Elixir, Go, Rust, Elm, Kotlin and Flutter with a few small videos on Clojure and ReasonML.
Thanks! I love your videos, please keep them coming.
Like your videos Tensor
Be honest, I like Tensor's voice more
11:40 ScopeModel→InterheritedWidget and ScopedModelDescentdant (後裔)
11:59 Shopping Cart Structure
12:31 Layout & Implement ScopeModel
Dont' forget
16:56 rebuildOnChange: false to prevent unnecessary render
Just use BLoC pattern lol
I really like how flutter handles events with sinks and streams. Can't I / Shouldn't I implement the BLoC pattern when it is the most simple solution available to me using the 3rd party provider library? People often mention Provider as if it is a competitor with bloc, which confuses me.
Coming from react native - react js development. This is what I'm looking for to handle state management on flutter.
Awesome !
I've only understood the hole flutter state management issue after seeing this video, very clarifying videos as usual. Great job!
This was actually really helpful
Finally I've got it! Watched many videos about the BLoC but got the idea behind it only after watching this video. Thanks guys, your are the best!
Flutter, Dart, Kotlin, Angular, PWA - where are we headed? Too early to comment, new frameworks always feel & look great unless it matures and there is a feedback from the community.
On the contrary; with Dart being everywhere is promising sign. React was taking big strides in both Web and Native applications.
VUE JS was a evolving so very well and it showed a lot of promise and results.
Seriously; there should be a video to detail an adoption strategy (from Google). Being developers we tend to have hard time developing apps with so much happening around from the big houses.
REST based server with Microservices is in full swing when it comes to server side coding. Both JAVA and JS have a very good echo system here.
Google stack looked clean with Firebase (serverless) and Kotlin being made official lang for Android. Will try to come up with some article surrounding these frameworks, libraries and languages, from the Developers' perspective.
dude. do not worry. first of all: flutter is just a wrapper around different operating system SDKs (ios, android). that means: flutter is always going to need kotlin or something else. so if you are going to start writing a new app for both systems: go for flutter. if you want to develop also a website? go for angularDart. trust me. then you can share your dart code (services, classes, validations). but this is all client-side. how hard is it to get started in client side development? not very hard. so why worry? one week and you are in. and backend? well nothing changed there actually. you could write your backend code in java 20 years ago and you still can. maybe 1% of all developers need to worry about scaling their backend (because they work at google). the other 99% can write their backend in PHP if they want. it wont matter. just stick to that what makes most fun to you.
another great flutter talk
Why Google developers always use Mac?
Because of native bash support (although Windows is working hard on WSL) and consistency - if the whole team has Macbooks, then there wouldn't be much CPU/Architecture discrepancies. You could go for just a normal laptop with Linux installed, but Macbook just feels better.
I was so excited when I heard of the release of Flutter. It will do good even though it was just released , but I fell it will do well
Great talk, but... At the end of the day where are we going? Google added Kotlin as native language but at the same time wasting time on flutter? Which one is the right way?
Google added Kotlin just because google wants to leave java as soon as possible. Flutter is the future.
It's all just options and preference. More options is great
Both. Native Android wont suddenly disappear.
Kotlin solve developer problems now. Flutter+Dart is just starting, but I see it as a pretty good solution for mobile in the near future.
There are lots of people already trying to do something like that (state management, functional, reactive, MVI, etc) in the android community right now and most of this ideas translate seamlessly in flutter/dart.
This is an excellent discussion of state management/architecture options. Well done.
Is it necessary to make the stream every time, its like we are creating a list of the variable every time. I want to make only on variable than how its possible?
Great talk, streams & reactive pattern are very exciting!
another great presentation on Flutter. Clear as, logical and easy to follow.
Really liking Flutter state management!!!
Great presentation and nice to see a state management pattern in Flutter that doesn't rely on Redux. It feels over engineered and would benefit greatly from dependency injection done properly (which seems thin on the ground right now). One question I have around the BLOC pattern is how do you deal with the issue of having "initial state" being rendered before the observable updates ?
Using something like ValueObservable solves this. ValueObservable is coming soon to pkg:rxdart (github.com/ReactiveX/rxdart/pull/182).
Great talk! Helpful and fairly easy to follow.
when you realize that you always used the bloc pattern and now it gets a name......
Flutter UI development is all nice and good. Managing state is very confusing. If the variable is not in the widget scope why doesn't intellisense or compilation works?
Great talk. I have a question: I'd love to see how you wired the CartBloc into the CartProvider, because you pass CartBloc() as a param to the provider, but you get the CartBloc back when you call Provider.of(...). How would this look if you had multiple Blocs?
Great question. I recently wrote a companion article that tries to address some of those conundrums: medium.com/flutter-io/build-reactive-mobile-apps-in-flutter-companion-article-13950959e381
Really great presentation. Besides the awesome content, i love how you guys presented it!
Coming from developing web apps using Vue.js, handling state in Flutter seems complicated. In Vue its as simple as having a globally accessible Store-component with a variable and then use that variable anywhere and mutate it from anywhere. No need for inherited widgets and different streams for input and output. So much simpler. Maybe this is not possible with Dart?
i tried but i dont get it
Dart Streams look super nice!
I have tough time trying to figure this out, since Mobx in React native kind of the same as this bloc thing. How about login and localization? Can I do end to end with just bloc???
Excellent content, excellent delivery...
In your example at the end where you show how changing the locale will give you the opportunity to change the USD to something else, isn't it much more likely that these changes will occur in another 'bloc' such as the 'SettingsBloc'? How then would you reference that SettingsBloc in your CartBloc? Is that possible?
The canonical way is to pipe relevant outputs of one bloc to inputs of the other. So your CartBloc would have an Input and your SettingsBloc would have an Output. This nicely decouples things, because that LocaleChange can come from other places than the SettingsBloc, and can flow elsewhere than to the CartBloc.
Depending on how much you want to (over)engineer things, you can have an overarching app-level Bloc through which these inter-bloc streams go. This makes it even easier to decouple everything, especially in case the two blocs live in separate parts of your widget tree. They'll just go through the "boss".
Hope that helps.
Filip Hráček it does! Thank you.
great talk, was wondering if there is an equivalent approach to state management in web dev (specifically with Vue.js) as opposed to the standard redux/ngrx/vuex/etc approach. if so, can anyone point me to some good resources for learning more ?
Really promising. Going to use this for sure.
Hey, is there a source code from this presentation somewhere on GitHub? BTW, I loved that state management pattern using streams. Makes me re-think the whole application design and build on top of it. Thanks a lot!
Yes, here's the code: github.com/filiph/state_experiments
Found it: github.com/filiph/state_experiments
So excited, let do it !!!!!!!!!!!!!!!!!!!!
This is an EXCELLENT talk on the Google way to manage Flutter State. Thanks very much. Also, at about 14:00, what is the VS CODE plugin you are using to wrap the MaterialApp widget with the ScopedModel widget? Thanks again. Love and peace - Joe Dorocak
I found the answer to my question: 1. Select MaterialApp 2. L-click the "Show Fixes" Light Bulb. Thanks again for a GREAT talk. Love and peace - Joe
Yes, this is the Dart plugin itself. Thanks for the kind words!
Thank - really great talk! Sorry about the silly question - but it's killing me :) - how do you do the magic of auto-inserting code when you type just Sink (at 24:20)?
This is IntelliJ's Live Templates. You can define your own: www.jetbrains.com/help/idea/using-live-templates.html
Thank you! You are the best!
Scoped Model - ua-cam.com/video/RS36gBEp8OI/v-deo.html . (Use a Data Model class, ScopedModelDescendent & notifyListeners(), set the rebuildOnChange flag to false to prevent unnecessary re-building, disadvantage-Need to remember which widget should not rebuildOnChange )
Streams - ua-cam.com/video/RS36gBEp8OI/v-deo.html (flutter has a StreamBuilder widget that has a builder which builds whenever there is a new value in the stream, Sink for input events, Stream for output to subscribers. Implementation - Sink is backed by a StreamController or BehaviourSubject (which has memory of the last value). To publish, you call the method on the Model that adds items to the Sink. To listen, you need to wrap the widget with a StreamBuilder and specify the stream it listens to. This is so that the StreamBuilder passes down any new data to it's child. Afterwards, merge the streams.
wholesome talk
Are you Planing to create a drag and drop ui Creator? that would be cool
Thank you team.
Very nice work, thank you.
Very helpful. Thank you so much
Where can you get one of those Flutter shirts? Love Flutter, BTW :)
Is there any way to use the stream data again? I have an object on a stream and I need to retrieve its data. I want to retrieve it so I won't need to instantiate a variable and a stream for it. I tried to use Stream.object.last.then() but I couldn't pass through its future's return with a stateless screen...
Oh I figured it out on my code! I instantiate an object inside my Stream which upgrades with the handlers and then made a function to return it, so if I need to use a quantity or a price in a if before the Stream component I can use it :)
I have a flutter app that shows the list of video files from internal storage...now I want to display thumbnails of videos in video list so how can I do this in my flutter app? If anyone have any Idea then please help me.
I am using ListBuilder widget.
18.24 for Streams
21.04 bloc patterns
Thanks for your effort
Just starting to get into app development, should I learn Flutter or Ionic?
Flutter.
Don't learn Ionic. Hybrid apps are a dying technology.
Flutter. I got started on Ionic but switching over to Flutter :)
Honestly. If you are just starting out, learn something which will make you emploayable. Flutter is a nishe within a nishe. You will still be better of learning kotlin to do android development or React Native, which has a much bigger market share.
React-Native
thank you very much video
Thanks for the nice video. Amazing!
Why use Sink instead of a regular stream? What is the difference?
Sink is the receiving end of a Stream. You can't listen to a Sink, for example. It's a clear separation of concerns - Sinks are only for input, Streams only for output.
api.dartlang.org/stable/1.24.3/dart-core/Sink-class.html
You could, for example, use StreamController for both input and output, but that would give users of your API too much power. It would be the streaming equivalent of having a public, mutable field (instead of methods as inputs and getters/finals/immutables as outputs).
Hope that helps. I was going to explain Sink in the talk but we figured we'd run out of time, so we dropped that part.
Thanks. That's really helpful
Implementing the BLoC pattern, I do not understand what the CartProvider class is for. Can someone explain me? Thank you
The cart provider is the access point through which the widgets get the cart reference.
cart = CartProvider.of(context).
It is the flutter way to hand a resource down the widget tree.
FYI: Here is the file (never appeared in the video)
github.com/filiph/state_experiments/blob/master/shared/lib/src/bloc/cart_provider.dart
/// This is an InheritedWidget that wraps around [CartBloc]. Think about this
/// as Scoped Model for that specific class.
///
/// This merely solves the "passing reference down the tree" problem for us.
/// You can solve this in other ways, like through dependency injection.
///
/// Also note that this does not call [CartBloc.dispose]. If your app
/// ever doesn't need to access the cart, you should make sure it's
/// disposed of properly.
look like MVI pattern in android or cycle.js
should I learn this or angular cordova
Definitely this
What are some of the Google apps built using Flutter??
The two that are public knowledge are listed in flutter.io/showcase/.
scopedmodel looks simpler to me while BLoC seems like overkill
What are the requirements to understand that talk?
I am kinda lost
It would be very helpful to know where exactly we were losing you. It's very possible that we just failed to explain things in a clear way.
That said, this talk is definitely for intermediate-to-advanced Flutter devs. There are at least 2 other great talks from this year's I/O that are much better in explaining the foundations of Flutter.
Thanks Filip, I will come back after learn more about flutter then.
I think it's a nice framework.
*This video is valuable. I really was surprized of the way of ScopeModelDecendant job in inherited widgets and it is one of the beautiful ways to create the inheritance among the widgets. I was wondering how to pass variable value among the widgets and here is a cool way which is exactly specified to do that.*
How does Matt get the menu that shows "Wrap with new widget" at 14:01 (ua-cam.com/video/RS36gBEp8OI/v-deo.html)? Is this a VS Code extension? Thanks :)
@@emilyfortuna2262 👍 thanks!
super weird naming - Sink. I don't think this exist in rx. Why not full implementation of rx. this mixing of notions is so confusing
I lost when they start talking about the streams
It's amazing video...I like it
What is the editor you use to code? It's called 'Code'?
VS code. code.visualstudio.com/ free, open source, runs on any OS. very awesome tool..
I personally use intellij👌🏽
Filip uses Android Studio and Matt uses Visual Studio Code.
I don't like Flutter development patterns. It breaks encapsulation, why not create custom classes to hold data/states ?
Could you elaborate? Encapsulating data in separate classes is definitely a pattern that Flutter apps use, and we show some of it in the talk (Product, CartItem, Cart, etc.).
Sorry I didn't watch the entire video. I guess the code structure is throwing me off little bit.
9/11 great presentation
Outstanding
Excellent
What is the purpose of UnmodifiableListView if I used bloc_start pattern ?
github.com/filiph/state_experiments/issues/5
Good question, replied on Github. The gist is: UnmodifiableListView is there for safety. It's immutable, so consumers of the Cartclass cannot change the items in the class via the Cart.items getter. They have to go through Cart.add() and Cart.remove() (which make sure to do the right thing).
google is promoting 2 ways to develop android, flutter and kotlin and its confusing for me because I am a newbie in android and both of these seem promising.
I guess one of the differences is that Kotlin lets you make Android apps and Flutter lets you make cross-platform iOS+Android apps.
@NiteLite yes you are right, but my confusion is because of "Kotlin-Native" which is also a new project aims to let u create cross platform apps with kotlin
You can build cross-platform production level app for million users today with Flutter, but not with Kotlin/Native. However, with the future development of Kotlin/Native and Kotlin/JS, you can basically write Kotlin everywhere, mobile, web front-end, back-end, even desktop. It's not coming in the near future, but I bet it would happen in like 2-3 years.
what if I just want to write apps for android right now? ( because I cant afford ios store fee per year ) what should I choose then? is flutter still good enough for this scenario? I mean can it do all the things at OS api level which can be done with kotlin and android jetpack?
Kotlin was just an improvement upon Java and was good. But Dart and Flutter are going to be the industry standard and Google standard for Android apps in the years to come. As of now it's just another option.
I really hate the fact that just to mutate state, something so basic and necessary in every single reactive app we have to use external libraries already, I mean its just too much effort for something so trivial and this might lead to spaghetti code in the longer run.Should have not chosen dart i think.
Is there code available from this presentation?
Sure: github.com/filiph/state_experiments
What's the best way to change data from product in CartAddition on this file?
github.com/filiph/state_experiments/blob/master/shared/lib/src/bloc/cart_bloc.dart
I'm trying to use Sink/Stream to update my components with listeners, but I got this problem... Should I use CartAddition again with a new Product or define a set for product?
pfff nevermind, I just realized I can create a sink for each field
I am a beginner, and I lost track. Could you upload a state, where you start coding in the video? Or could you recommend a tutorial, where I can see this or similar from the beginning?
O my GOD Great !
I don't agree that converting the price (1.0) to a string ("1.00 USD") is business logic.... IMHO, the business data is 1.0, and how we present this to the user (be it "$1.00" or "1.00 USD" or something else) is presentation logic.
Keep in mind that this a very simple example app. In a real world scenario the switch from $ to € would involve different taxation, probably delivery from a different national branch of the company, with prices drawn from a another price list, differences in consumer rights laws to care about and so on.
The Bloc pattern allows to change the entire app's behavior with the turn of a single switch. A differentiation between business and presentation logic would introduce yet another layer to worry about. This would go against the paradigm of separation of concerns.
Very helpful, but having the source of this simple example would've been even more so.
How can I implement two-way binding using "Sinks and Streams"?
awesome
Github link - github.com/filiph/state_experiments
Is there a repo to find the examples on this video? I'm interested in the custom widgets they have the the cartbutton with the badge. EDIT: Found it!!! github.com/filiph/state_experiments/tree/master/shared
What are the advantages of Flutter over React Native?
native performance and beautiful ui
Flutter is actually Native where as React Native is only partially native (its basically a web browser that runs your react application). While flutter also runs on top of the native platforms and uses its own rendering engine, it still compiles everything down to native code which is a huge deal as far as performance goes. Flutter also has built in support for concurrency and distributed rendering. This means that it is much harder to write code that will slow down the performance of an application (or block the rendering of the UI) and it also means that you have access to good tools which can take care of these types of concerns (Dart Isolates for Expensive computation and first class stream support for state changes etc). If you are a react native developer, I highly recommend you take a look at Flutter.
>>> React Native is only partially native (its basically a web browser that runs your react application).
Wat? React Native is translated to native UI components, it is not hybrid like Ionic/Cordova, AFAIK.
Flutter on the other hand ditches native UI components entirely and draws itself out from its own realm of Dart code, so it's actually closer to Xamarin.Forms than it is to native app development.
The following article talks about the differences between Flutter and other systems, including React Native. "What's Revolutionary about Flutter" hackernoon.com/whats-revolutionary-about-flutter-946915b09514
Wrong... React Native is not a Cordova Framework to run in a webview, Code written in ReactNative uses native components. No DOM here.
2020?
Great demo! Some additional links -> flutter.dev/docs/development/data-and-backend/state-mgmt/options
Number 3
lol "it's nothing but pretty, if you concern it's pretty"
it looks like even worse than js.
Redux Flux Flutter great
Another Moba game?
i will wiat 1 year more.
Why is it posting my comments 4 times, @UA-cam?
The code for this talk github.com/filiph/state_experiments
check out *Flinty Rolls* a game built on MATERIAL DESIGN on PLAY STORE
Princes +1
1st view
The only hell that exists is the one for those who use white background
man, it's our personal choice )) do not be mad about that
That is, for all the book publishers in history?))
LOL. You were actually writing this comment in the white background.
5 view
The last thing we need are more frameworks. No good reason to use this over native android and iOS.
Write once, run anywhere. Besides flutter is integral for google's next os fuchsia. Plus flutter is native unlike react native
You lost me at Streams .