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

@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

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.

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

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!

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

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.

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

@miquelbeltran, please weigh in

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.

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.