Journey towards Flutter Web Part 3: Design

If you are coming to this page directly, make sure you go through Journey towards Flutter Web Part:2 before starting this one.

In this article, we will be discussing methods for making an app responsive on both Mobile and Web, while maintaining a single codebase.

Here are some widgets provided by Flutter for building a responsive layout:

• CustomSingleChildLayout
• CustomMultiChildLayout
• FittedBox
• FractionallySizedBox
• LayoutBuilder
• MediaQuery
• MediaQueryData
• OrientationBuilder
• Aspect Ratio

These widgets will help you make the app responsive on devices of different sizes, but the same UI on every device won’t look intuitive, what if you want to show different UI on devices of different sizes?

Below are the screenshots of the Responsive UI for the Rally project which has a different UI for Mobile and Desktop view.

Desktop UI for Rally

Mobile UI for Rally

So in that case you need to use a breakpoint, which will change UI when a device width will go beyond that breakpoint or below it e.g. if my breakpoint is 700px, so when device width ≤ 700 show Mobile UI,device width > 700 & device width <= 1200then show Tablet UI and device width > 1200 then show Desktop UI.

In case if you don’t want to define your own breakpoint you can use this package which has many breakpoints.

Here is how to achieve the above condition with a helper class:

import 'package:flutter/material.dart';

/// list of all devices
enum DeviceType {
  desktop,
  tablet,
  handset,
}

/// breakpoints for desktop, tablet and handset
final desktop = 1200;
final tablet = 900;
final handset = 600;

DeviceType _displayTypeOf(BuildContext context) {
  /// Use shortestSide to detect device type regardless of orientation
  double deviceWidth = MediaQuery.of(context).size.shortestSide;

  if (deviceWidth > desktop) {
    return DeviceType.desktop;
  }
  if (deviceWidth > tablet) {
    return DeviceType.tablet;
  } else {
    return DeviceType.handset;
  }
}

bool isDeviceDesktop(BuildContext context) {
  return _displayTypeOf(context) == DeviceType.desktop;
}

bool isDeviceTab(BuildContext context) {
  return _displayTypeOf(context) == DeviceType.tablet;
}

bool isDeviceMobile(BuildContext context) {
  return _displayTypeOf(context) == DeviceType.handset;
}

Let’s see how to use the above helper class.

Container(
  child: isDeviceDesktop(context)
      ? _buildDesktopUI()
      : isDeviceTab()
          ? _buildTabletUI()
          : _buildMobileUI(),
)

Check out these example projects for reference.

1. aqi_monitor
2. flutter_gallery

If you find this article useful, please do hit the clap icon 👏 and share it with your friends, as it will motivate me to write more.

Feel free to connect with me on social media platforms for any doubts regarding Flutter.

Ashutosh Singh