CODEWITHSUNDEEP
flutterresponsive-design
Vincent Wittek
Vincent Wittek

Reputation: 53

How to rescale an app depending on screensize in flutter

Recently I came across a bit of problem when testing out my flutter app on different devices. The app looks fine and nice on my google pixel XL and also on any normal other android of iphone, however recently somebody tried it out who had a iPhone SE (the smaller type), I dont know what exact version it was. On that iphone the app was completely broken, the heights and sizes of the widgets were not fitting the screen and made it overall unusable...

The question I have now is how I resize in the best fashion? I looked up a couple of solutions which work with media query or other stuff, but for that I would have to go through a ton of code and rewrite every single widget in terms of the screensize. Is there a way to make this easier and scale the whole app at once so that it looks the same on all displays?

Its my first real project, which is why I didnt know that this would be such a big deal. All the tutorials I ever watched never talked about this problem and just used normal fontsizes which are not responsive. Would you maybe even say that its not even worth it to adapt to smaller screen sizes, as they are such a small percentage of users today?

Thank you very much for any help!

Upvotes: 0

Views: 1449

Answers (1)

Yasine Romdhane
Yasine Romdhane

Reputation: 626

You can use media queries but like you said and like I thought that's a bit extra work I don't want to do :)

Fortunately there's a cool plugin for that, meet flutter_screenutil it's very easy to use!

First you have to set the dimensions of your design device (the device you're developing on)

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
        designSize: Size(1080, 2340),
        builder: () => MaterialApp(
              theme: ThemeData(
                  accentColor: Color(0xFF38bddc),
                  scaffoldBackgroundColor: Colors.white),
              debugShowCheckedModeBanner: false,
              home: LoginScreen(),
            ));
  }
}

Then set your height, width and fontsize values like so:

Container(
      width: 300.w,
      height: 200.h,
      child: Text("Hello world", style: TextStyle(fontSize: 50.sp) ,),
    );

There's a lot more if you take your time through the documentation.

Upvotes: 2

Related Questions