Open escamoteur opened 4 years ago
@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
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:
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.
I may quote here a user from Discord:
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.