How to sync flutter apps between different UI and size of different phones

Question

enter image description here

My application is not syncing with different phones. How to solve this problem? Please help in detail explanation?

Answer 1

Make your container scrollable(ListView or other types) so that when screen size change your content will not be hidden

Answer 2

You want to use MediaQuery class in order to get the height and width of the users screen. You can read about it here: https://api.flutter.dev/flutter/widgets/MediaQuery-class.html

To get the user screen height and width you can call this inside your widgets build method:

var screenWidth = MediaQuery.of(context).size.width;
var screenHeight = MediaQuery.of(context).size.height;

Then after you have those variables you can make your other widgets sizes be in proportion to your design. I usually design in AdobeXD and I use the template screen size 640 x 360. Then if I made a specific widget in my design 50x50 in size I set the corresponding widgets height and width in my application by using these formulas:

50 / 640.0 * screenHeight;
50 / 360.0 * screenWidth;

That way my widget may look different depending on how big the screen of the user is. You should combine that with what Besufkad Menji said. Use a ListView if you think all of your widgets won't fit on a small screen.

Answer 3

You can build for different screens using

OrientationBuilder

and

MediaQuery.

Also, you can use a plugin flutter_screenutil .

flutter_screenutil - flutter plugin for adapting screen and font size. Let your UI display a reasonable layout on different screen sizes! Note: This plugin is still under development, and some APIs might not be available yet.