Flutter ScreenUtil: Let your UI display a reasonable layout on different screen sizes.

Screens are of different sizes, but how can you make your flutter application respond to these sizes?

One of Flutter’s primary goals is to create a framework that allows you to develop apps from a single codebase that looks and feels great on any platform.

But how can you achieve this? Your app might appear on screens of many sizes, from mobile to desktop.

When it comes to layout in Flutter, design can be grouped into two:

1. Responsive: This is an app that has its layout tuned for the available screen size.
2. Adaptive: Running an app on different device types.

We could use some of Flutter's useful widgets and classes for building a responsive UI but that not what is article is about. We will be using a Flutter package to make our UI responsive for multiple screens.

Package Name: flutter_screenutli

flutter_screenutli is a flutter package for adapting screen and font size. It lets your UI display a reasonable layout on different screen sizes. This package currently has over 3.5k start on pub.dev which shows how popular and useful this package is to the flutter community and in this article we will demonstrate how we can make this package in your flutter app.

Install the package

Installing the package is really straightforward. You can visit the package in pub.dev to get the latest version and add it to your pubspec.yaml then run flutter pub get.

dependencies:
  flutter:
    sdk: flutter
  # add flutter_screenutil
  flutter_screenutil: ^{latest version}

Add the following imports to your Dart Code

import 'package:flutter_screenutil/flutter_screenutil.dart';

After all the above is done, we can start making our app look responsive.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //Set the fit size (Find your UI design, look at the dimensions of the device screen and fill it in,unit in dp)
    return ScreenUtilInit(
      designSize: const Size(360, 690),
      minTextAdapt: true,
      splitScreenMode: true,
      // Use builder only if you need to use library outside ScreenUtilInit context
      builder: (_ , child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'First Method',
          // You can use the library anywhere in the app even in theme
          theme: ThemeData(
            primarySwatch: Colors.blue,
            textTheme: Typography.englishLike2018.apply(fontSizeFactor: 1.sp),
          ),
          home: child,
        );
      },
      child: const HomePage(title: 'First Method'),
    );
  }
}

The first way from above, you wrap your MaterialApp with ScreenUtilInt Widget and you will have to pass the following parameters

1. designSize — This is very important to set your default fit size, you can find this in your UI design, by looking at the dimensions of the device screen and filling it in.
2. builder — Use builder only if you need to use a library outside ScreenUtilInit context

Now you can use the library anywhere you like, with an example below

Container(
  width: 50.w,
  height:200.h
)
//If you want to display a square based on width:
Container(
  width: 300.w,
  height: 300.w,
),

//If you want to display a square based on height:
Container(
  width: 300.h,
  height: 300.h,
),

//If you want to display a square based on minimum(height, width):
Container(
  width: 300.r,
  height: 300.r,
),

Adapter font

//for example:
Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text(
      '16sp, will not change with the system.',
      style: TextStyle(
        color: Colors.black,
        fontSize: 16.sp,
      ),
      textScaleFactor: 1.0,
    ),
    Text(
      '16sp,if data is not set in MediaQuery,my font size will change with the system.',
      style: TextStyle(
        color: Colors.black,
        fontSize: 16.sp,
      ),
    ),
  ],
)

Setting font does not change with the system font size

MaterialApp(
  debugShowCheckedModeBanner: false,
  title: 'Flutter_ScreenUtil',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  builder: (context, widget) {
    return MediaQuery(
      ///Setting font does not change with system font size
      data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
      child: widget,
    );
  },
  home: HomePage(title: 'FlutterScreenUtil Demo'),
),

Specified Text:

Text("text", textScaleFactor: 1.0)

Specified Widget:

MediaQuery(
  // If there is no context available you can wrap [MediaQuery] with [Builder]
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
  child: AnyWidget(),
)

You can also check the example app for more here.

Learn more on how to use the package. here

Cheers!! 🍻🥂Don't forget to follow me here and X(formally Twitter)