Skip to main content

Responsive guide

Typically, a responsive app has had 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, tablet, to a laptop or desktop computer.

tip
  • In responsive UI we don’t use hard-coded values for dimension and positions.
  • Use MediaQuery to get the real-time size of the window.
  • Use Flexible and Expanded widgets to get a flexible UI that works with percentage rather than hardcoded values.
  • Use LayoutBuilder to get the ConstraintBox of the parent widget.
  • You can get the orientation of the device using MediaQuery or OrientationBuilder.

Types of Responsive UI​

Responsive UI is of two types:

  1. Working with Orientation
  2. Creating layouts for different screen sizes ... [ 🌟 valid for Web design ]

Responsive UI for Orientation​

How do we detect orientation changes?

We can get the orientation of the device using MediaQuery or OrientationBuilder.

OrientationBuilder​

info

We can check the orientation at any point in the code (inside or outside the OrientationBuilder) using

MediaQuery.of(context).orientation

For that time when we’re lazy and/or only portrait will do, use

SystemChrome.setPreferredOrientations(DeviceOrientation.portraitUp);

To start out, we use a widget called OrientationBuilder. OrientationBuilder is a widget which builds a layout or part of a layout on an orientation change.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: OrientationBuilder(
      builder: (context, orientation) {
        return orientation == Orientation.portrait
            ? _buildVerticalLayout()    /// if orientation is portrait return 'Example Widget _buildVerticalLayout()'
            : _buildHorizontalLayout();     /// else return 'Example Widget _buildHorzontalLayout()'
      },
    ),
  );
}

The OrientationBuilder has a builder function to build our layout. The builder function is called when the orientation changes. The possible values being Orientation.portrait or Orientation.landscape.

Responsive UI for different screen sizes​

MUST KNOW for platform specific Responsive UI​

There are two basic approaches to creating Flutter apps with responsive design:

Use 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, the 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.

  • Use the MediaQuery.of() method in your build functions This 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. Again, if you use this, then your build function automatically runs if the user somehow changes the app’s size.

Other useful widgets and classes for creating a responsive UI:

  • AspectRatio
  • CustomSingleChildLayout
  • CustomMultiChildLayout
  • FittedBox
  • FractionallySizedBox
  • LayoutBuilder
  • MediaQuery
  • MediaQueryData

great Responsive UI package​

responsive_builder ✅​

responsive_framework​

flutter_screenutil​

packages to fix some Responsive Issues​

NOT IDEAL - DON'T USE​

Somewhat Confusing on what it wants to do

Tutorials on Responsive UI​

FilledStack's responsive_builder​

diegoveloper's Responsive UI video​

Flutter Responsive UI for Learning Platform App​