Introduction

As the Flutter community continues to expand, so does the framework's support for the various platforms we use in our daily lives, including smartphones, desktops and laptops, and embedded systems. With this growth comes the need to determine which platforms or users the solution is being developed for, and additional considerations such as maintaining a consistent user experience across platforms without sacrificing the platform's design language, and accommodating different screen sizes of the platforms.

In this article, we will delve into the important topics of adaptability and responsiveness in Flutter applications, as we explore ways to tackle the challenges of targeting different platforms or devices.

---

What is the difference between an adaptive and a responsive app?

Adaptability and responsiveness can be considered separate aspects of an app. An app can be adaptive without being responsive, or responsive without being adaptive. Additionally, an app can possess both qualities or lack them altogether.

A responsive app has its layout tuned for the available screen size. Often this means (for example), re-laying out the UI if the user resizes the window, or changes the device’s orientation. This is especially necessary when the same app can run on a variety of devices, from a watch, phone, or tablet, to a laptop or desktop computer.

An adaptive app can run on different device types, such as mobile and desktop, and requires dealing with mouse and keyboard input, as well as touch input. It also means there are different expectations about the app’s visual density, how component selection works (cascading menus vs bottom sheets, for example), using platform-specific features (such as top-level windows), and more.

Developing a responsive Flutter app

Since Flutter allows you to create apps that self-adapt to the device’s screen size and orientation, there are two basic approaches to creating Flutter apps with responsive design:

1. Using the LayoutBuilder class

2. Using the MediaQuery.of() method in your build functions

1. Using the LayoutBuilder class

From its builder property, you get a BoxConstraints object. Examine the constraint’s properties to decide what to display. For example, if your maxWidth is greater than your width breakpoint, return a Scaffold object with a row that has a list on the left. If it’s narrower, return a Scaffold object with a drawer containing that list. You can also adjust your display based on the device’s height, aspect ratio, or some other property. When the constraints change (for example, the user rotates the phone, or puts your app into a tile UI in Nougat), the build function runs.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: LayoutBuilder(
        builder: (context, size) {
          log('${size.maxHeight}'); // prints device's screen height
          log('${size.minHeight}'); // prints 0
          log('${size.maxWidth}'); // prints device's screen width
          log('${size.minWidth}'); // prints 0 
          return Text ("I'm responsive");
        }
      )
    );
  }

2. Use the MediaQuery.of() method in your build functions

The MediaQuery.of() method gives you the size, orientation, etc, of your current app. This is more useful if you want to make decisions based on the complete context rather than on just the size of your particular widget. It is important to note that, if you use this, then your build function automatically runs if the user somehow changes the app’s size.

import 'package:flutter/material.dart';

const int largeScreenSize = 1024;
const int mediumScreenSize = 600;

class ResponsiveWidget extends StatelessWidget {
  final Widget largeScreen;
  final Widget mediumScreen;
  final Widget smallScreen;

  const ResponsiveWidget({
    Key key,
//in this example we consider desktop as default, hence the @required
    @required this.largeScreen,
    this.mediumScreen,
    this.smallScreen,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (screenWidth >= largeScreenSize) {
          return largeScreen;
    } else if (screenWidth < largeScreenSize &&
            screenWidth >= mediumScreenSize) {
          return mediumScreen ?? largeScreen;
        } else {
          return smallScreen ?? largeScreen;
        }
      },
    );
  }
}

Other useful widgets and classes for creating a responsive UI:

• AspectRatio

• CustomSingleChildLayout

• CustomMultiChildLayout

• FittedBox

• FractionallySizedBox

• LayoutBuilder

• MediaQuery

• MediaQueryData

• OrientationBuilder

Other resources in Developing a Responsive App

For more information, here are a few resources, including contributions from the Flutter community:

• Developing for Multiple Screen Sizes and Orientations in Flutter by Deven Joshi

• Build Responsive UIs in Flutter by Raouf Rahiche

• Making Cross-platform Flutter Landing Page Responsive by Priyanka Tyagi

• How to make flutter app responsive according to different screen size?, a question on StackOverflow

---

Please proceed to my next article where I have talked about Building adaptive apps.

---

Don't fail to Follow me here and On

• Twitter @JacksiroKe

• Linked In Jack Siro

• Github @JacksiroKe