Responsive Layouts

When creating a Flutter app that needs to support multiple screen sizes, such as mobile and tablet,
using the responsive_builder package can help you manage responsiveness efficiently.
In this section, we will walk through building a responsive login form that displays differently on mobile and tablet devices.
Specifically, the tablet version will show a horizontal layout with a logo next to the form, while the mobile version will display the login form vertically.

Building Screen without supporting multiple screen sizes

If you’re creating a login screen without the need to support multiple screen sizes (i.e., focused on mobile-only), the design and implementation become simpler.
You won’t need to manage breakpoints or responsiveness, so you can focus entirely on creating a straightforward layout optimized for a typical mobile screen.
import 'package:flutter/material.dart';
import 'widgets/login_form.dart';
  
class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});
  
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(8.0),
            child: LoginForm(),
          ),
        ),
      ),
    );
  }
}
Login Screen

Support multiple screen sizes

When using the responsive_builder package in Flutter, it simplifies the process of building responsive layouts that adapt to different screen sizes, such as mobile and tablet.
Let’s go deeper into how you can use it to support a responsive login screen, specifically comparing the scenarios where we had only mobile support with now incorporating tablet layouts.

1- Add responsive_builder package:

flutter pub add responsive_builder

2- Define Mobile and Tablet Layouts:

Next, you define separate layouts for mobile and tablet screens. In this case, the mobile version will display everything in a vertical column, while the tablet version will place the logo on the left side of the login form.
import 'package:flutter/material.dart';
import 'package:responsive_builder/responsive_builder.dart';
import 'mobile/login_mobile_screen.dart';
import 'tablet/login_tablet_screen.dart';

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ScreenTypeLayout.builder(
          mobile: (_) => const LoginMobileScreen(), // <-- mobile screen

          // you can remove this, then mobile screen will be displayed on tablet/iPad
          tablet: (_) => const LoginTabletScreen(), // <-- tablet screen

          // (optional desktop screen)
          // desktop: (_) => const LoginDesktopScreen(),

          // (optional watch screen)
          // watch: (_) => const LoginWatchScreen(),
        ),
      ),
    );
  }
}
Login Screen

Advantages of Using Responsive Builder:

  1. Cleaner Code: The separation of mobile and tablet layouts using ScreenTypeLayout makes the code cleaner and easier to maintain.
    You don’t have to sprinkle MediaQuery or conditional logic throughout your widget tree.
  2. Maintainability: By organizing different layouts for mobile and tablet in dedicated widgets (like mobileScreen and tabletScreen), future modifications become simpler.
    If you need to update only the mobile UI, for instance, you don’t have to touch the tablet layout.
  3. Scalability: The package allows you to define layouts for even more screen types, such as desktop, making it highly scalable for apps that need to support a wide range of devices.
  4. Better User Experience: Using Responsive Builder, you can ensure that each device gets the optimal experience, whether it’s a smaller mobile phone or a larger tablet, without stretching or compressing the UI elements unnecessarily.