How to Build Responsive Applications With Flutter
A look at widgets
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
- Larger audience. The more devices an app can be run on, the wider audience it will attract.
- Lead users to the purchase. I believe there must be an emotional component pushing people to move intuitively on the user path. Simply speaking, it’s thinking ahead on all user stories.
- Brand awareness. A beautiful design makes your brand easy to recognize among competitors.
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.
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
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.
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
OrientationBuilder widget is pretty similar to
LayoutBuilder. From its builder property, you get the
For example, you can use
OrientationBuilder to change the number of columns of
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
Expanded are two widgets that you can use inside
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
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 is a more complex widget developed for advanced layout users, stay tuned, we’ll discuss it in our next technical blog post.