Building Responsive Layout with flutter screenutil: A Hands on Guide 2024

Muhammad Naeem

Written and reviewed by:

Flutter makes mobile app development easy and flexible. However, creating responsive layouts that look good on all devices can be challenging. A handy plugin, flutter screenutil, makes building responsive UIs a breeze. Are you ready to learn how to use it?

In this blog, I will explore the nitty-gritty of flutter screenutil and how you can use it create layout that look fantastic on any screen size.

What is flutter screenutil

Before we get into the nitty-gritty, let’s meet our hero: flutter_screenutil. This package helps in adapting screen and font sizes, making it super easy to create responsive and adaptive designs in Flutter.

flutter screenutil ensures your designs stay consistent and look great on all devices, from the smallest phone to the largest tablet.

Why use flutter screenutil

Suppose you create an app that looks good on your phone but when you install it on your friends tablet, it turns into a jumbled mess. Without responsiveness, the Flutter app can look good on high-end phones, but not on every device.

We know Flutter is a cross-platform framework. If we want to make our app super great, we have to make it responsive. For use on web, macOS, and tablet devices, you have to make the app responsive.

Our hero, flutter Screenutil, helps us make our dream app more responsive and user-friendly. It ensures that your app design is more consistent and looks super awesome on every device.

Remember, the more devices supported, the more users you will get. And more users means more money, and, as you know, money is motivation.

Getting Started with flutter screenutil

First thing first, let’s get flutter screenutil into your project.
Add the package to your pubspec.yaml file.

				
					dependencies:
  flutter_screenutil: ^5.9.3

Run flutter pub get to install the package, and we’re ready to roll!

Initializing flutter screenutil

Initialization is as simple as pie. Wrap your MaterialApp or CupertinoApp with a ScreenUtilinit widget and specify the design size:

				
					import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

void main() {
  runApp(
    ScreenUtilInit(
      designSize: Size(360, 690),
      minTextAdapt: true,
      builder: () => MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Responsive Flutter App')),
        body: HomePage(),
      ),
    );
  }
}

Scaling Your UI Elements

Here’s where the magic happens. flutter screenutil provides a range of helper methods to scale your UI elements:

Size scaling: width, height
Text scaling: fontsize
Radius scaling: radius

Let’s see them in action. Imagine you have a button that you want to look consistent across all devices:

				
					Container(
  width: 300.w,
  height: 60.h,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(12.r),
    color: Colors.blue,
  ),
  child: Center(
    child: Text(
      'Press Me',
      style: TextStyle(
        fontSize: 18.sp,
        color: Colors.white,
      ),
    ),
  ),
)

Output:

In this example, the width, height, border radius, and font size of the button are all scaled according to the screen size. This ensures the button maintains its proportions on any device, making your design as slick as a cat on a marble floor.

Adapting Text Sizes

One of the trickiest parts of responsive design is getting text sizes right. You want your text to be readable on a tiny phone screen but not shout at users on a tablet. With flutter screenutil, you can scale text sizes effortlessly:

				
					Text(
  'Hello, World!',
  style: TextStyle(
    fontSize: 24.sp,
  ),
);

This will scale the text size based on the device’s screen size, ensuring your message is clear without being overwhelming.

Handling Different Screen Orientations

flutter screenutil also makes it easy to handle different screen orientations. You can adapt your layout based on whether the device is in portrait or landscape mode. This is where your app can really shine, providing a seamless experience no matter how the user holds their device.

				
					ScreenUtilInit(
  designSize: Size(360, 690),
  minTextAdapt: true,
  splitScreenMode: true,
  builder: () {
    return MaterialApp(
      home: OrientationBuilder(
        builder: (context, orientation) {
          return orientation == Orientation.portrait
              ? PortraitHomePage()
              : LandscapeHomePage();
        },
      ),
    );
  },
);

In this setup, you can create separate layouts for portrait and landscape modes, ensuring your app looks great in both orientations.

>>Check out our best flutter blogs

Debugging with flutter screenutil

Debugging can be a bit like finding a needle in a haystack, but Flutter Screenutil provides some handy tools to help. Use the ScreenUtil instance to print the screen width, height, and other metrics:

				
					print('Device width: ${1.sw}');
print('Device height: ${1.sh}');
print('Device pixel ratio: ${ScreenUtil().pixelRatio}');
print('Device text scale factor: ${ScreenUtil().textScaleFactor}');

These debug statements can help you understand how your UI is scaling and adjust your design accordingly.

Tips for Using flutter screenutil Effectively

Think Flexibly: Use flexible widgets like Flex, Expanded, and Wrap to make your designs adaptable.
Test on Multiple Devices: Check your app on various devices to ensure it looks great everywhere.
Keep It Simple: Don’t overcomplicate your layout. Simplicity often results in the best user experience.
Stay Updated: Keep an eye on updates to the package to leverage new features and improvements.

5 advantages of using Flutter Screenutil

We know we have Flutter’s built-in Layout Builder and MediaQuery class. So why will we use Flutter Screenutil instead of Layout Builder and MediaQuery?

Let’s make a comparison:

Feature	flutter_screenutil	Layout Builder	Media Query
Simplified Scaling	Provides methods like .w, .h, .sp, and .r for scaling dimensions and text sizes easily.	Requires manual calculation of scaling factors.	Requires manual calculation of scaling factors.
Consistency Across Devices	Ensures design consistency across different screen sizes and resolutions by initializing with a design size.	Consistency must be managed manually, often requiring repetitive checks and calculations.	Consistency must be managed manually, with checks for various device dimensions.
Adaptive Text Sizes	Uses .sp to adapt text sizes dynamically based on screen dimensions and user settings.	Requires additional logic to handle text scaling.	Provides access to text scale factors but requires custom logic for scaling.
Ease of Initialization	Simple initialization with ScreenUtilInit, which integrates seamlessly with the app’s root widget.	More boilerplate code and repetitive calculations needed for responsive layouts.	More boilerplate code and calculations required for responsive layouts.
Debugging Tools	Offers helpful debugging methods to print screen dimensions and other metrics.	No dedicated debugging tools; developers must manually check layout properties.	No dedicated debugging tools; developers must manually check layout properties.

Wrapping Up

With flutter screenutil, building responsive layouts in Flutter is a walk in the park. By scaling your UI elements and text sizes, you can create designs that look stunning on any device. So, put on your superhero cape, and start crafting amazing responsive UIs with flutter screenutil!

Remember, responsive design is about creating a seamless experience for all users. So go ahead, dive into flutter screenutil, and make your Flutter apps shine like never before!

Written and reviewed by