How to Build a Responsive UI in Flutter

Are you tired of building mobile applications that don't look good on different screen sizes? Do you want to create a user interface that adapts to different devices and orientations? If so, you're in the right place! In this article, we'll show you how to build a responsive UI in Flutter.

Flutter is a mobile app development framework that allows you to build high-performance, high-fidelity, apps for iOS and Android, from a single codebase. Flutter's widgets are designed to be flexible and customizable, making it easy to create responsive UIs that work on different screen sizes and orientations.

Understanding Layouts in Flutter

Before we dive into building a responsive UI, let's take a quick look at how layouts work in Flutter. In Flutter, everything is a widget, including the layout. A widget is a description of part of a user interface, and a layout is a widget that arranges other widgets in a specific way.

Flutter provides several layout widgets, including Container, Row, Column, Stack, and Expanded. Each of these widgets has its own unique properties and behaviors, making it easy to create complex layouts.

Building a Responsive UI

Now that we understand how layouts work in Flutter, let's start building a responsive UI. In this example, we'll create a simple login screen that adapts to different screen sizes and orientations.

Step 1: Create a New Flutter Project

The first step is to create a new Flutter project. Open your terminal or command prompt and run the following command:

flutter create responsive_ui

This will create a new Flutter project called responsive_ui.

Step 2: Add Dependencies

Next, we need to add some dependencies to our project. Open the pubspec.yaml file and add the following dependencies:

dependencies:
  flutter:
    sdk: flutter
  flutter_screenutil: ^4.0.2

The flutter_screenutil package is a Flutter plugin that provides a set of tools to help you build responsive UIs.

Step 3: Create the Login Screen

Now that we have our project set up, let's create the login screen. Open the main.dart file and replace the existing code with the following:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(375, 812),
      builder: () => MaterialApp(
        title: 'Responsive UI',
        home: Scaffold(
          body: SafeArea(
            child: SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 20.w),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(height: 100.h),
                    Text(
                      'Welcome Back!',
                      style: TextStyle(
                        fontSize: 30.sp,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 20.h),
                    Text(
                      'Please sign in to continue',
                      style: TextStyle(
                        fontSize: 16.sp,
                        color: Colors.grey,
                      ),
                    ),
                    SizedBox(height: 50.h),
                    TextField(
                      decoration: InputDecoration(
                        hintText: 'Email',
                        border: OutlineInputBorder(),
                      ),
                    ),
                    SizedBox(height: 20.h),
                    TextField(
                      decoration: InputDecoration(
                        hintText: 'Password',
                        border: OutlineInputBorder(),
                      ),
                    ),
                    SizedBox(height: 20.h),
                    Align(
                      alignment: Alignment.centerRight,
                      child: TextButton(
                        onPressed: () {},
                        child: Text(
                          'Forgot Password?',
                          style: TextStyle(
                            fontSize: 16.sp,
                            color: Colors.blue,
                          ),
                        ),
                      ),
                    ),
                    SizedBox(height: 20.h),
                    ElevatedButton(
                      onPressed: () {},
                      child: Text('Sign In'),
                    ),
                    SizedBox(height: 20.h),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          'Don\'t have an account?',
                          style: TextStyle(
                            fontSize: 16.sp,
                            color: Colors.grey,
                          ),
                        ),
                        TextButton(
                          onPressed: () {},
                          child: Text(
                            'Sign Up',
                            style: TextStyle(
                              fontSize: 16.sp,
                              color: Colors.blue,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

This code creates a simple login screen with two text fields for email and password, a forgot password button, a sign-in button, and a sign-up button.

Step 4: Make the UI Responsive

Now that we have our login screen, let's make it responsive. We'll use the flutter_screenutil package to make our UI responsive.

First, we need to initialize the ScreenUtil class. We do this by wrapping our MaterialApp widget with the ScreenUtilInit widget. We also need to specify the design size of our UI. In this case, we're using an iPhone X design size of 375x812.

return ScreenUtilInit(
  designSize: Size(375, 812),
  builder: () => MaterialApp(
    // ...
  ),
);

Next, we need to use the ScreenUtil class to set the size of our widgets. We do this by using the w and h properties of the ScreenUtil class. The w property sets the width of the widget, and the h property sets the height of the widget.

For example, to set the padding of our Container widget to 20 pixels, we use the following code:

padding: EdgeInsets.symmetric(horizontal: 20.w),

To set the height of our SizedBox widget to 100 pixels, we use the following code:

SizedBox(height: 100.h),

We also need to use the ScreenUtil class to set the font size of our text. We do this by using the sp property of the ScreenUtil class. The sp property sets the font size based on the screen's pixel density.

For example, to set the font size of our Text widget to 30 pixels, we use the following code:

style: TextStyle(
  fontSize: 30.sp,
  fontWeight: FontWeight.bold,
),

Step 5: Test the UI

Now that we've made our UI responsive, let's test it on different screen sizes and orientations. Run the following command in your terminal or command prompt to launch the app:

flutter run

This will launch the app in the iOS or Android simulator, depending on your configuration. You can also launch the app on a physical device by connecting it to your computer and running the same command.

Try rotating the simulator or device to see how the UI adapts to different orientations. You should see that the UI adjusts to fit the screen size and orientation.

Conclusion

In this article, we've shown you how to build a responsive UI in Flutter. We've covered the basics of layouts in Flutter, and we've shown you how to use the flutter_screenutil package to make your UI responsive.

With these tools, you can create mobile applications that look great on different screen sizes and orientations. Happy coding!

Editor Recommended Sites