Skip to content
Hallway
0:00 / 0:00

#flutter#adaptiveui#mediaquery

How to build Adaptive UI with Flutter

Flutter

634K subscribers • 172 videos on Hallway

YouTube
  • Recommended by 2 people: 2 in engineering communities.
  • Presented by Reid Baker and Tyler Holland
  • Made by the vendor. The company whose product it covers made or sponsored it.

Intermediate. Assumes working knowledge.

402K views2 years ago2 recommendations

Mobile developmentSoftware designFlutter and React NativeVue, Svelte, Angular and others

Reid Baker and Tyler Holland explain how to build Flutter apps that adapt to different screen sizes, inputs, and platforms.

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-codelab 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

Why it's here

2 people recommend this

What people say. Recommended as the go-to Google I/O talk for understanding responsive and adaptive layouts in Flutter.

u/resolutiona11yin r/FlutterDev • Recommends

On “What’s your strategy for responsive design (mobile)”

Change your layout based on the window size. You can use `MediaQuery.sizeOf(context)`, `LayoutBuilder`, `GridView`, `SafeArea`, and `ConstrainedBox`. How to build Adaptive UI with Flutter
5View on Reddit

u/fabierin r/FlutterDev • Recommends

On “Challenge real world experience with Flutter Desktop in production for business/internal systems”

…there are a few packages available which seem like they'll make it work out of the box. It's an easier problem to solve, I think, than the RTSP feeds I've been trying to handle. Everything else you mentioned is literally peanuts for a desktop Flutter app to handle. One thing I'll suggest is that you watch Google IO's talk on responsive layouts. [video I don't really build for desktop or mobile. I build an app which can detect its available space and re-arrange itself to fit in the space provided. So my desktop apps typically arrange themselves into mobile apps when you size them down. This works well for the gazillion screens you have to handle anyway and makes mobile apps size up well…
2View on Reddit

u/nehaldamaniain r/FlutterDev • Mentions

On “Responsiveness for a flutter app ”

(1374) How to build Adaptive UI with Flutter - YouTube
3View on Reddit

u/LeeroyYOin r/FlutterDev • Mentions

On “First Flutter Project”

# 7. Divide the screens into widgets. # 8. MediaQuery `MediaQuery.of(context).size.width --> MediaQuery.sizeOf(context).width` # 9. Styling in theme at least you can add fonts # 10. creatingtask.dart file I have doubts about setState(). You don't have fields in the state. \`SetState()\` does nothing. Whenever you change the internal state of a \State\ object, make the change in a function that you pass to \setState\. `setState(() {` `Provider.of<Taskprovider>(context, listen: false)` `.selectedCatogert = select ? allcat : null;` `});`
1View on Reddit