How to build Adaptive UI with Flutter
Вставка
- Опубліковано 16 чер 2024
- Enhance your Flutter app with an Adaptive UI that works and looks great on phones, tablets, foldables, and desktops. Discover how to handle different input modes, such as mouse and keyboard, to create a seamless experience on all devices. Explore powerful adaptive widgets, new display APIs, and quick rules to help you build a highly adaptable and user-friendly Flutter app.
Flutter adaptive design documentation → goo.gle/3QflMzJ
Material Design layout guidelines → goo.gle/3QbViPs
Flutter Display api → goo.gle/4aJqZIc
Android's Large screen app quality guidelines → goo.gle/3xJWDXy
Building an animated responsive app layout with Material 3 → goo.gle/flutter-responsive-co...
Speakers: Reid Baker, Tyler Holland
Watch more:
Check out all the Mobile videos at Google I/O 2024 → goo.gle/io24-mobile-yt
Check out all the Flutter sessions from Google I/O → goo.gle/io24-flutter-yt
Check out all the Android & Play sessions from Google I/O → goo.gle/io24-androidplay-yt
Subscribe to Flutter! → goo.gle/FlutterYT
#GoogleIO
Products Mentioned: Flutter
Event: Google I/O 2024 - Наука та технологія
Check out all the Flutter sessions from Google I/O → goo.gle/io24-flutter-yt
Please keep Flutter alive
What do you mean? Is there any doubt that they will? I would recommend to watch the Flutter/Dart talk on WASM I/O 2024... if in doubt!
@@Apenschi Google has a history of abandoning projects so people are asking them not to abandon this one :)
Toyota uses flutter for the infontainment system on their new cars, other big brands use flutter too, even google used it for google earth recently. I don't think they'd drop all this. They only kill what they don't consider successful enough or if they've built something they consider better. Flutter doesn't fall in either category.
@@kyriakos098 WELCOME KOTLIN MULTIPLATFOR
I hope and wish the same too 🥹
Safe area: 1:07
Grid view: 4:41
Foldables (Screen Orientations): 9:18
Adaptive Widgets: 12:32
Media Query: 13:04
Layout builder: 14:22
Dialogs (Example 1): 15:26
Navigation UI (Example 2): 18:54
Custom Layout (Example 3): 21:48
Adaptive Inputs: 24:26
Things to keep in mind: 28:11
Recap: 32:57
Flutter is best
Great job Reid and Tyler!
Wicket cool pointers, keep up the good work 👍
Awesome Thanks alot to the Flutter team
very cool! Flutter ftw
If I was calling the shots at Google, I'd ditch Compose, KMP, and Compose Multiplatform altogether and go all-in on Flutter/Dart, just like my competitor's got it figured out with Swift/SwiftUI.
Google is some time very weird instead of focusing on flutter but good comes with compose which not much mature ,google would just focus on flutter only Flutter
Kotlin is more performant and would remain so for the foreseeable future.
@@muddi900 now no much different between flutter and native , flutter is mature now so performance is not a argument
Flutter is the best UI framework, it is true
Flutter flies fluently fast for frameworks!
Flutter is interesting 😍😍
Anyway to get the Presentation file? is it opensource?
Wah, anjir ini yang gua tunggu tunggu. keren!!!
🔥🔥🔥
Is there any difference between using isMoreTallerThanWide in LayoutBuilder, and using OrientationBuilder? It seems like I can achieve the same result with both widgets. And about performance, which one is better to use?
Good question! There is a key difference, and it's for reasons like the ones we reference at 7:13.
If the app is running in a non-fullscreen mode, OrientationBuilder wouldn't actually tell you if the window your app is running in is more tall than wide. Let's use a tablet as an example, it could be in landscape mode, but the app could be running on 1/3rd of the display with another app taking up the other 2/3rds, in which case your app would actually be taller than it is wide, even though you're in landscape orientation.
Another difference is that LayoutBuilder allows you to move your widget to different places in your app, and it will always behave as expected because it gets the local min and max height and width. Let's say the widget was originally taking up the entire screen, but you want to move it to a side bar or underneath some other widget. The available space for the widget might change such that while the app window as a whole is more tall than wide, the space the widget has is actually wider than it is tall.
Performance wise, there's essentially no difference between the two. If your screen size isn't actively being changed, both OrientationBuilder and LayoutBuilder would do some quick calculations to grab the current orientation or available space (respectively), and then build the child widget. All of that is extremely fast.
If you're changing the size of the app window or the space your widget is given to render, LayoutBuilder would end up rebuilding your widgets every time that size changes (with a max of once per frame refresh). This isn't really a "performance" implication, it just means the UI would respond correctly while the resizing is happening. Flutter can rebuild widgets extremely quickly.
@@tylerhollandgoog Amazing!! Thanks
The cheering is a bit much, guys.
Finally
nice
Whiles react conf is going
😍😍😍
💪💪💪🔥🔥🔥😍😍😍
EXCELLENT !!!
Hey, good.
😎😎😎
Please google never bin flutter
WELCOME KOTLIN MULTIPLATFOR
rangeeeeeeeeeeee
Flutter is awesome, but the it's logo not so much..
Finally flutter team exists in Google 😌😌
WELCOME KOTLIN MULTIPLATFOR
refactor refactor refactor. but more than half the people don't give a sh8t. i don't like those people... refactoring is the only way to good code. thanks for covering that... small widgets is the way to go...
Lol
Is add Mein Bakri Ki Tarah faltu Mein bakbak Waqt Lage rahte ho Hindustan mein koi hai jo English Jaanta hun
Please keep Flutter alive
NO , THEY LEAVE FLUTTER , WELCOME KOTLIN MULTIPLATFOR