Explain how to adapt best for different screen sizes / pixel sizes.

[escamoteur]

I may quote here a user from Discord:

What's the recommended/easiest way to make apps UI scale properly, without hundreds of ScreenUtil or MediaQuery calls.

Native Android apps scale pretty well without much extra effort - can Flutter do the same? I've started an app, looking good on an emulator, but then on my device (with lower DPI) many things looked huge, zoomed in... If I went to display settings, put it to 'smaller' setting (higher DPI), Flutter app UI is good, but other apps are too small.

Any way to force flutter app to that 'smaller size' setting?

I myself have no really general solution found for this and this question comes up pretty often.

Although we have device pixel ration its seems it doesn't give you always what you want because elements that looked good on a bigger screen look too big on a smaller one or Widgets that fit on the screen on the big screen now produce overflow exceptions. Also if the user changes the font size in the system settings you have to react somehow

So adding a chapter to the cookbook would be really helpful.

[talamaska]

@escamoteur I used FractionallySizedBox and Flex, I didn't use MediaQuery and ScreenUtil at all.

[hatuan314]

@escamoteur I used the ScreenUtil library to build the multi-screen Flutter application. I tested it on iPhone X, 7, 6, Pixel 2, 2Xl, my device (Samsung galaxy Note 4) and some Android devices with lower screen resolutions. And everything is fine. Widgets automatically scale according to the resolution of each device. https://pub.dev/packages/flutter_screenutil

[TechieBlossom]

I think, combining three solutions is way to go

1. Use responsive widgets as in the official documentation, most of the things are solved.
2. Text is the second thing, which can be handled using a single text multiplier. As explained in this video https://youtu.be/afBmGC63iIQ
3. Different layouts for different screen sizes like portrait, landscape, tablet/web.

[navjyot11singh]

flutter_screenutil plugin is one the most comfortable option I can rely on for adapting the UI according to different screen sizes. I have a piece of code that will make your flutter UI coding life much more comfortable. Just have a look at it in my repo here or visit this link https://www.hotreloader.com/2020/06/flutter-adapt-ui-to-different-screen.html

[rayliverified]

There are many approaches to responsiveness and my attempt to streamline and simplify the process is with my Responsive Framework https://github.com/Codelessly/ResponsiveFramework

The library offers a framework for managing responsiveness and utility methods that help with development on Flutter Web such as transposing Row/Columns on Desktop/Mobile.

What differentiates it from other responsiveness libraries include but is not limited to:

• Top-down, "root-level" responsiveness. I believe element level responsiveness is wrong because it creates interdependencies that become hard to manage. Widget nesting causing nested responsiveness will make the problem even worse.
• "AutoScale" behavior as a responsiveness option (very useful for scaling animations!)
• Breakpoint driven and tag support.
• No MediaQueries!

[domesticmouse]

Updated the labels to recognise that this isn't an issue with existing codelabs nor examples. I do support that this would make for good content for the Flutter Cookbook.

/cc @RedBrogdon & @kf6gpe

[Marcelo-Petrucelli]

Some solutions are really nice: https://pub.dev/packages/flutter_screenutil

I'd also think about even improving Flutter in this direction when talking about Units. You see, this could really improve how Flutter advances on screen adaptability, since we already have options like these: https://docs.flutter.dev/development/ui/layout/adaptive-responsive

But not always you want to build multi views for diferent sizes (web like), but you still want adaptability when talking about pixel density. Correct me if I'm wrong, but "flutter_screenutil" brings an elegant solution that could be available.

[goderbauer]

@a-wallen @gspencergoog You recently did some work in the adaptive layout space. Anything worth mentioning here?

[sfshaza2]

@miquelbeltran, please weigh in

[miquelbeltran]

From my understanding, we are talking about responsive design (UI changes depending on different screen sizes, but offers a consistent user experience) and not adaptive design (which includes responsive design, plus also user experience may be different on a different platform regarding things like mouse vs. touch navigation, menus, dialogs, native controls, etc.).

The answer that the documentation offers now is effectively to use MediaQuery and LayoutBuilder for that task: https://docs.flutter.dev/ui/layout/responsive/adaptive-responsive#creating-a-responsive-flutter-app

For a more advanced approach, the article on adaptive apps also provides excellent information about visual density and in general how to build both responsive and adaptive UIs.

The codelab "Take your Flutter app from boring to beautiful" also offers a good example of building an Adaptive app.

When it comes to cookbooks, there is only one that would qualify as resoonsive design: Update the UI based on orientation and it uses OrientationBuilder, I think it would be good to add one that uses LayoutBuilder, MediaQuery and "screen based breakpoints". It could be titled something like "Update the UI based on screen size", and do things like changing the size, padding, or location of widgets depending on the DartPad run window size.

[sfshaza2]

OK, I'm going to leave this open for now. This info was covered in the adaptive docs that I re-wrote for the Q2 2024 release, but we don't actually have a cookbook recipe, which would be nice.