Code beautiful UI with Flutter and Material Design (Google I/O '18)
Вставка
- Опубліковано 6 жов 2024
- To stand out, apps need to have smooth, motion-rich, customized designs. Watch beautiful UIs come to life in record time with Flutter and the latest evolution of Material Design. Learn how Flutter’s layout and stateful hot reload can make UI development intuitive and fast, how to go beyond stock widgets to deliver customized interfaces, and how to add motion and animation for delightful user experiences. Best part: do this all with a single codebase that produces native apps on iOS and Android.
Rate this session by signing-in on the I/O website here → goo.gl/okXy7v
Watch more Design sessions from I/O '18 here → goo.gl/61w1Nk
See all the sessions from Google I/O '18 here → goo.gl/q1Tr8x
Subscribe to the Google Developers channel → goo.gl/mQyv5L
Subscribe to the Material Design channel → goo.gle/Materi...
#io18 #GoogleIO #GoogleIO2018 event: Google I/O 2018; re_ty: Publish; product: Flutter - General, Material Design - General; fullname: Mary Xia, Will Larche; event: Google I/O 2018;
Having played about with Flutter a lot, this is an improvement. Previously, I've liked Flutter, but felt it was a bit "incomplete", but it looks like they've added some of the finesse to it. Now, if only they can get a working webview and tidy up the BLE stuff, and I'll be a happy camper.
"Well I love how this is taking shape"
*deafening silence*
they need prerecorded laughs...
that part was brutal. xD hahaha
damn,,,,, feel bad tho
well to be fair the audience is muted when audio is recorded exclusively through their mikes. unless they're all lifeless drones watching i'm sure there were at least a few chuckles
developers are from another planet
Nice to see people actually dressing up for a keynote.
I was thinking the opposite. In the tech world, we pride ourselves on having better things to think about than arbitrary fashion concerns. :)
Maybe a suit and tie is a bit much but still more presentable than the wrinkeld t-shirt from hamper everyone else wears.
Not everyone... There is nothing wrong about having fashion concerns imo. Would be great if people stopped thinking their priorities are "better".
I never really understood this. I honestly like dressing up.
Developers in formal dress does look odd. I suspect they had another event to go to straight after.
Really cool. And error is a part of development, I am totally cool with it. But 1 thing I would like to point, we are still have a very verbose code in dart.
Hitesh Choudhary I like that flutter is a first-class citizen in material design.The one thing that still stops me from giving it a try it's the fact that they don't use an XML-like syntax to define layouts.
I can tell you as someone who actually works with Flutter in Production that while it might look verbose and look like "callback hell" the actual amount of code it takes to build an application tends to be smaller then if you were to build that same application in either Obj-c/Swift or Java/Kotlin. This becomes even more true if you consider that you are basically building apps that work for both platforms with the single codebase. Also, the tooling helps a lot in this regard with dynamic comments that make it very easy to navigate the widget tree and that nested code.
That aside, if you really want to make things feel more modular and less nested you can refactor the widget trees into smaller functions which does really cut down on that "callback hell"/verbose feeling.
I'm agree that verbose code make it harder to learn and read so may its improve in future versions.
Waiting 100% kotlin code instead of Dart, to give it a try
Not gonna happen AFAIK.
How can one presentation be so fun and cringe at the same time?
It is all Will's magic
*I'M GLAD YOU ASKED, MARYYYYY*
looks like some1 wasnt receving much reception from the audiences
I really Respect and Appreciate all the Speakers and the Enthusiasm with which these presentations are given... if only i had Teachers like this while growing up in a third world developing country.... instead of ego-ridden teachers who never wanted to Teach... All Presentations at the I/O conf are given in such an Enthusiastic manner... & with Genuine Interest Kudos!
Crab Synth where you from?
Really like that they addressed the individuality aspect of Material Design in this years Google IO. Flutter looks really cool too.
As a student focused on Machine Learning, I look at this amazing framework that Google is developing and feel sad that I don't get time to work with it. The flutter team is doing an amazing job.
Loved these two presenters, that was a bang-up professional job that looks like they worked hard on. Really appreciate your work, it was inspiring.
Google need to add a feature on UA-cam called double thumbs up cuz I'm not feeling contented with the single thumbs up I gave to this video. This is lovely
I'd settle for aspect ratio or 720p30 option
Looking for developers with at least 3 years of solid Flutter experience, deep understanding of Material Flutter...
looking for boss who will pay milions usd to me to learn another framework from tons on market, im not a robot
Serious? 3 years experience?
Flutter has only been around for 1 year. Dart 2 really gives it the power it needed with strong typing. :)
Lmao
Yeah, anyone who wasn't part of Flutter's initial inception is unqualified.
Not only was this super informative, but I honestly enjoyed their jokes a ton. I don't know if this buried in a long conference and the audience was too tired to laugh ...but I loved the levity. Also, I think it's amazing you can live code this much and see those results in a 30 minute presentation, just wow.
fully agree, build swift on XCode need rebuild reload and takes minutes to see your changes, flutter hot reload slicks
"Yass, research!"
I am in love with these presenters!!!!
I couldn't agree more about the "delightful developer experience".
They were so fun! My favorite session so far.
Awesome! Custom theming was my #1 reason i avoided polymer and was hesitant about flutter.
Wow she is amazing. She saved the presentation :)
what a joke
I just finally became comfortable with React Native and now Flutter suddenly comes out 😭
It seems really performant and fast though
I am testing flutter on my project. It's cool and easy to learn, but I always forgot to close ')' and ' ,'
When you open "(" close it immediately ")," then wright the code from the middle "(|),"
pretty clear I understood all the needed notions to build my app very quickly ! Jokes were fade but great content for beginners.
Wow, improvements of FloatingActionButton and BottomAppBar are great.
Love it! Finally a cross platform solution!
try fusetools
I thought their outfits matched well with the background, and I really enjoyed the presentation.
I would like to see how they created custom designs and widgets for apps which were mentioned as an examples in 0:37 - 0:43
You two are awesome, keep up the good works!!
A developer loves to see hot updates, portability, modularity and "programmable styles" - Flutter is the right choice.
DART is the only glitch (new language to learn).
Great share, like how you shared the shortcuts to wrap widgets super helpful. 😀
I cannot imagine to work with will he's so awkwardly innocent 😅
Its fun to see Flutter demonstrated with Apple product :))
flutter is cross-platform and was demoed with various other devices in other presentations.
what a delightful duo
Tough crowd. You two did great
Really cool. So how about google map. Could you show Drawing shape or line or polyline and marker example?
THIS IS THE BEST PRESENTATION I'VE SEEN EVER
شاهد الحصة الخاصة بفاير باز مع فلاتر ستبهرك اكثر بكثير
fin?
في البث المباشر مازال لم يقومو بنشر الفيديو ربما بعد ساعة
with all the respect, how many have you seen?
Giovanni Malausa
I've seen a lot but this one is more fun
I really liked all the videos especially this. Where can I get the code for flutter eb application for login page and dashboard with the Tiles similar to this video
Awesome talk yall !!!! I like there personality... my kind of developers lol
Nice and fun presenters, love them :3
Love this session, Thank you for sharing
great talk. the main thing i want to know about Flutter is: what can't it do? what limits will i run into if i try to write apps in Flutter rather than native android? where is the exhaustive, detailed comparison of these two app writing approaches?
you wrote this three years ago, but I wanted to notify you just to say, yes, you have a good point. What are the limitations?
Awesome features , I am just trying these for my new app
I hope flutter will going to be the solution for cross-platform
i hope it willl going to replace android-native
Andriy Gaidar Yeah
I hate how cumbersome it's to define UIs in Android.
I think it will replace the hybrid frameworks like Ionic, cordova and maybe even React Native. Flutter is just as fast as writing in Android or iOS with native code and these other hybrid frameworks are not.
Abeltensor I've seen you reply a few times and you seem to be misinformed. Reat-native is not a hybrid framework, it compiles to native code in the same way flutter does. Flutter is google's version of facebooks react-native. I have a hard time seeing flutter surpass react-native for a long while, especially with the prevalence of react on the web these days. Even if flutter ever reaches the maturity of react-native it will be hard to adopt users since javascript/react are already so commonly known, whereas dart and flutter are complete mysteries.
Personally I don't see any reason to use flutter for the foreseeable future
Enmanuel Martinez yes but they should remove Dart on it, it is a pain.
I wish Apple presentations were like this
8:03 Would love to see IME actions coming out right. By all means we might actually end up having forms.
Love you flutter
The presentation could have been improved.
Aravind M J SO awkward
The dude is pretty annoying because he keeps talking but does not contribute to the presentation at all
this looks like a really promising tool to compile horrible designed apps directly to ios and android
Arturo Maltos hahaha
Ok, I'm new to the whole android development thing and I'm coming from visual studio which is completely fine offline i.e. I rarely run into network errors or a need for an 'offline mode'. Are these packages native to android studio or does the IDE or is this package never on my system. Asking because I lack of internet gives me API level errors. If it is something that's offline or if all packages are built in locally what version of AS will this be on?
Not John Cena From my experience, creating apps with flutter do need installing and downloading packages. Without internet, I was unable to create one. But after that, I could now code and mess around using only the packages I already installed even without internet. Note that its not a one time thing with packages. You have default/core packages already installed after running flutter doctor on cmd but if you want to use like firebase you'd have to install it first and only then that you could start messing with firebase with or without internet (this from my experience --a noob wannabe programmer :))
JohnReese Thanks for the reply (noon here as well)
Not John Cena you're welcome!
Awesome presentation!
Is the source code available on github ?
codelabs.developers.google.com/codelabs/mdc-104-flutter/#0
Then how to use that code? Don't we need xml for android layout anymore? :v
Thank you for your efforts.
Angga Risky got you 😂😂
Great job guys :D
This thing is pure love 😍
Yaasss Queen, sachet that stage!
this was an awesome video
"fusetools" is light years ahead in terms of native app dev (cross-platform).
I wanted to use flutter but it is fare from commercial ready... For instance there is no way to not overlay the statu bard, no way to remove the webview scroll bar and no stripe compatibility which for e is a killer
I still don't understand what Flutter is. Is it an alternative to Ionic?
Jorge Sepúlveda its a native framework that let's you build applications for both iOS and android using one single code base. In a way its an alternative to ionic and react native except ionic and react native are a hybrid frameworks. Flutter uses dart which compiles to native code for all of the platforms and as a result is its much faster and more powerful then any of the hybrid app frameworks.
Pretty much, yes. It's superior in that it compiles to native code instead of using web views and JavaScript bridges. Also, it doesn't use JavaScript. :)
Thank you for your explanation!
Thanks much!
Yeah exactly. And Dart has a bad name because of stupid misunderstandings, but its actually a very powerful and flexible language that should have a much larger community then it currently does. Frankly, anyone who writes off flutter simply because it uses dart is a moron.
But why not include desktop apps? I also want to make desktop apps :( , not just for the mobile.
Why are we trying to create UI elements with code? it looks like early versions of Xamarin without Xaml support
So there is nothing for java android developers?
Its all for native amdroid ?
I was expecting nerdy devs with wrinkled shirts. IT is probably the only area where you lose credibility if you dress up formally.
The guy had a talk before talking about the general topic, where there was one guy wearing a casual shirt, one a casual t-shirt, and... the guy with the suit :D
Maybe they had some nerdy idea, about hey we talk about Design, lets wear designer clothes.. But that would be just another joke in this talk that no one got ;)
@Retrovibes They still look pretty nerdy to me! Especially with the haircut the guy has. It doesn't help that their speaking delivery style sounds like they are targeting the talk to 3rd graders.
You don’t get the reference from material design logo man.
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?
Nicely explained 👌
I am using VS Code and android emulator. Yours seems to be very fast emulator. can you please suggest the emulator for me?
App Demo is running on iPhone ....;)
The presenters are so awkward, not in bad way but funny and cute!! XD
Is there code available from this presentation?
I dont understand nothing of the code, but looks okay
hahah
讲的很不错，节奏把握很好。
Named parameters makes code much more readable, it should be a standard for new languages
I wish someone can dumb it down for a frontend JS developer ... I'm so lost ...
How they compile so fast ?
Can you give me your configuration
Is there any chance we can get the code?
Mary Xia was beautiful :3
She still is :)
...
Isn’t this google I/O? 🤔😮 Just saying why you didn’t use chrome book :D instead using apple? 😅
i need more than a pitch to go flutter way when React Native is on the table ..
Hahaaha ... i mean React Native has my heart
I can't find the Backdrop Widget class.
I believe it's a widget class that they made up by themselves. Not provided by Flutter.
Yeah, I found out later. I wonder if they provided the source codes. It's quite interesting.
What about hot reload ?
Where can I find the source code for this app?
Please can you open source this Shrine Design UI Kit Sketch or Photoshop
讲得非常好！
those commas and brackets are so scary
This is cool, but I'll stick with my react native
wow!wonderful
Sorry to say , as a developer flutter doesn't see to be developer friendly, mostly ), ; is more confusing 😐, maybe it's because I am new to flutter
Awesome!!!
+ Web inspired widgets, fast, one language to learn (instead of kotlin, java, xml) , native code for multiple platforms
- Dart
I have one big doubt about Flutter. when you have to code logical functions, database calls, event listeners, do we integrated it in Java or Kotlin with android studio?
No, you do not have to do that at all. When you write a flutter application, you write your Models and Data, business logic and User Interface in Dart (they tend to demo these apps so that you don't see the business logic or the data layer). You do not need to write a single line of Kotlin/Java or Objective-C/Swift when you are working with Flutter. The only cases where you would write any non-dart code in flutter is when you want access to an API from one of the native platforms but there are plenty of plugins you can use which expose those APIs to the Dart layer of the application.
As the other guy said. You get a base API to access most of it. They also have a package store and an easy way to call and return from native code from flutter. Literally nothing stopping you doing that if needed.
I think it's little embarrassing... But Flutter No.1!
can't find source code ...
As I saw in the docs, Flutter isn't exactly compatible with Java and default Android ecosystem (as Kotlin does, at least) seems that are a lot of friction, so isn't exactly useful, despite the promises.
No, I don't want to code with Dart, thanks. Less lines of code doesn't exactly mean more productivity at long run. When something goes bad, I want a expressive code helping to find out what is going on behind the curtains, not shortcuts or sintax sugar. I want a stable and well supported ecosystem, not a newbie mess.
Flutter seems really fancy, but also seems to be another Polymer phenomena: nice in presentations, not so much at daily basis.
i compare android ready-published app hokle with airbnb (flutter and react native). Airbnb is subtler than hokle....
where can i get the code?
awkward ,.,. but good presentation :) ,.,. keep it up ,., maybe i'll start to use this flutter to my apps :)
Just me or is it funny they aren’t hot reloading?
Thought the same thing, saw the video now. Why didn't they thought, is it false advertising?
Awesome !
well ! there is no Frosted glass transparency effect, i think it is not better
yongqiang tao Flutter has Cupertino widgets if you're looking for that effect.
Andrew Brogdon thank you very much !
I'm curious about how much a Flutter dev will earn
2:30 someone laughed really hard. I too did.
Lovely talk.