How to Build Responsive Applications With Flutter

A look at widgets

inVerita
inVerita
Feb 25 · 6 min read
Photo by Scott Webb on Unsplash

Changes are usual for an app configuration. When the user rotates the phone either vertically or horizontally, the keyboard appears.

The release of foldable smartphones, multi-window features for Android and Catalyst (the project allowing users to run iOS apps on macOS) for iOS, has uncovered unlimited variations of screen sizes.

If you want your app design to look polished, your app is supposed to appropriately “react” to configuration changes.


Responsive Design From a Business Perspective

Responsive design is a design and development technique allowing an application, website or system to adjust to the size of a user’s screen. It will optimize a user’s browsing experience by making a web page/application responsive for the specific device.

The concept of responsive design lies in using one set of code that adapts to different layout changes corresponding to various devices (smartphones, tablets, and desktop computers).


Responsive Design Goals

  1. Larger audience. The more devices an app can be run on, the wider audience it will attract.

There has been a significant audience transition in favor of mobile browsing. The responsive design is the easiest way to reach users across multiple devices and ensures a smooth user experience.

During the development stage, we use the rule called “let the mobile version go first”.

This approach is convenient because it’s always easier to adjust the design created for mobile devices to a larger screen (the remaining space can be filled with content).

In other words, if we have a simple thing we can turn it into a complex thing. The reverse process is more complicated.


Why Using a Responsive Design in Flutter Is a Must

Designers love magic, however, the execution process is not as easy in real life as we want it to be. If you decide to use Flutter, your designers will forget the “it’s impossible” phrase for good.

Flutter provides many widgets and classes to ease the implementation of the ideas designers may have.

  1. AspectRatio

Keyboard Changes Processing

In most cases, apps include text fields, and whenever a user interacts with an app, the keyboard appears.

The Scaffold widget automatically processes the keyboard changes, solving linking issues. It has a resizeToAvoidBottomInset field which controls the behavior of MediaQueryData.viewInsets.


Using MediaQuery to Define Configuration

You can use MediaQuery to get the real-time size of the window. It suggests the size and orientation of the app.

The MediaQuery widget is useful if you want to make decisions based on the complete context rather than on just the size of the particular widget.

The number of orientations is limited (for instance, portrait only).


Use the LayoutBuilder Class

LayoutBuilder is a simplified version of MediaQuery, created for basic size requests.

It is a widget that provides the dimensions of its parent so that you know how much space you have for the widget and are able to build the child component accordingly.

From its builder property, you get a BoxConstraints object. You can adjust the display based on the constraint’s properties (device’s height, device’s width, the aspect ratio, or another property).

For example, if maxWidth is greater than the 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. When the constraints change, the build function runs.


Use the OrientationBuilder Class

The OrientationBuilder widget is pretty similar to LayoutBuilder. From its builder property, you get the Orientation object.

For example, you can use OrientationBuilder to change the number of columns of GridView.


Use the FittedBox Class

Often, you have to scale the text depending upon the parent widget size. You can either use fixed values for various platforms or let the widget scale regarding the parent widget size.

The text is resized accordingly. In general, you can use other types of BoxFit. You can see how each of them behaves in the image below:


Use the AspectRatio Widget

When developing an app, you can neglect its size, but you must take into consideration the aspect ratio.

Regardless of the size of the device, it can be either wide, thin, or square. Flutter assists you at this point by providing the AspectRatio widget that sizes the child value to a specific aspect ratio.


Use Flexible and Expanded Classes

Flexible and Expanded are two widgets that you can use inside Row, Column, or Flex to give their children the flexibility to expand to fill the available space.

The difference is that the Expanded widget requires the child to fill the available space while Flexible does not. You might want to use Flexible and Expanded widgets to get a flexible UI that works with percentages rather than hardcoded values.


Use FractionallySizedBox Widgets

Sometimes your design calls for dimensions that are relative, for example, a button occupies 80% of the app’s width, whereas the margin takes only 10%. FractionallySizedBox can cope with that.

Wrap the child you want to be sized with FractionallySizedBox. Give it a height and/or width factor (0.8 means 80% of the available size) and use alignment to control where exactly the fractionally sized widget is supposed to be.

You can also use FractionallySizedBox with no child for fractionally sized whitespace.

You’ll probably want to wrap this FractionallySizedBox in a flexible widget so it plays well with a row or a column.


CustomMultiChildLayout

CustomMultiChildLayout is a more complex widget developed for advanced layout users, stay tuned, we’ll discuss it in our next technical blog post.


Better Programming

Advice for programmers.

inVerita

Written by

inVerita

inVerita is a software consulting company focusing on outsourcing and team augmentation services based in Ukraine. https://inveritasoft.com

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade