OverflowBar Widget: A neat way to build responsive Flutter apps.

Photo by Dan-Cristian Pădureț on Unsplash

Developers have been building responsive applications on Flutter since the very beginning. You get to cover a wide range of users who might access your application on mobile, tablets, desktops, and even the web. This flexibility allows users to experience your product in different ways, but with this, comes a hurdle for us, the developers. The hurdle I am talking about here is building a flexible responsive design.

There are different ways to build one. You might have heard of the following ways to achieve responsiveness:

1. MediaQuery: This is the most common approach people follow to put some constraints in place with the help of screen height and width. A typical example being something like this

final screenWidth = MediaQuery.of(context).size.width;
 if (screenWidth < 600.0) {
    return _buildMobileLayout();
 }
 else if (screenWidth < 1000.0) {
    return _buildTabletLayout();
 }
 else {
    return _buildDesktopLayout();
 }

You might choose to work with orientation as well like

Orientation orientation = MediaQuery.of(context).orientation;

2. LayoutBuilder: The main difference between MediaQuery and LayoutBuilder is that MediaQuery uses the complete context of the screen rather than just the size of your particular widget, whereas LayoutBuilder can determine the maximum width and height of a particular widget.

Example:

LayoutBuilder(
 builder: (BuildContext context, BoxConstraints constraints) {
   if (constraints.maxWidth > 600) {
    return _buildWideContainers();
   } else {
     return _buildNormalContainer();
   }
  },
 ),

Other widgets would be:

3. OrientationBuilder

4. Various combinations of Expanded and Flexible

5. FractionallySizedBox

6. AspectRatio

Now you might have heard or used the widgets mentioned above. They all involve putting in pre-defined constraints in place, one way or another it is on you, the developer, to decide what are the limits you would set to restrict UI for a mobile device, tablets, and desktop. This approach, while it works, might be error-prone and can be a bit frustrating at times.

We are looking for a Widget that takes this burden off our chest and adjusts itself as per the device.

Enters, the OverflowBar, a widget that lays out its children in a row unless they “overflow” the available horizontal space, in which case it lays them out in a column instead.

Note: This would work wonderfully if your design and widgets are similar across various screen sizes.

Let’s pick a typical use case for this.

Let’s say you are working on a News delivery app where you would like the user to see their feed as a list. The feed item is a combination of an image and a description. Now, in a mobile device, you would like the feed item to be vertical, and on a tablet/web, you might want it to be horizontal i.e. image on the left and its description on the right. You will be able to achieve such flexibility out of the box with OverflowBar.

Let’s visualize this using a simple example.

This is how it is rendered on both a mobile phone and on a tablet:

As you can see, the same code is rendered as:

1. a Row, when there is enough space for the OverflowBar, like in the case of a tablet or a web browser.
2. a Column, when the size is a bit constrained like in the case of a mobile phone.

Easy, right?

Do try it in your applications for a better experience.

How many claps does this article deserve?

If you find this article useful, please click the 👏 button and share to help others find it! Feel free to clap many times (10💥, 20💥 , or maybe 50💥 ?) It fuels my focus to write more of it.

Connect with me on LinkedIn or say hi on Twitter, mentioning this article. You can drop an e-mail at annsh29@gmail.com as well.

Check out my series on various Flutter widgets here -

Flutter Widget Guide — Index