Home
|
Blog
|
How to build responsive apps with Flutter: widgets review

How to build responsive apps with Flutter: widgets review

February 25, 2020
by Nazar Cybulskij

Changes are usual for an app configuration. When the user rotates the phone either vertically or horizontally, the keyboard appears. The release of the foldable smartphones, multiwindow 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” on configuration changes.

Responsive design from the 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.

  2. 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 about all user stories.

  3. 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 “it’s impossible” phrase for good.

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

  1. AspectRatio

  2. CustomSingle

  3. ChildLayout

  4. CustomMultiChildLayout

  5. FittedBox

  6. FractionallySizedBox

  7. LayoutBuilder

  8. MediaQuery

  9. MediaQueryData

  10. OrientationBuilder

Keyboard changes processing

In most cases, apps include text fields, and whenever a user interacts with an app the keyboard appears. Scaffold widget automatically processes the keyboard changes solving linking issues. It has resizeToAvoidBottomInset field, that controls the behavior of MediaQueryData.viewInsets.

Keyboard changes processing

Using MediaQuery to define configuration

Using MediaQuery to define configuration

You can use MediaQuery to get the real-time size of the window. It suggests the size and orientation for 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.

mediaquery.dart

MediaQuery example

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

orientation.dart

Use the LayoutBuilder class

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 be able to build 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 some other property). For example, if maxWidth is greater than 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.

layoutbuilder dart

Use the OrientationBuilder class

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.

orientationbuilder dart

OrientationBuilder.dart

Use the FittedBox class

use the fittedBox class

You have to often scale the text depending upon parent widget size. You can either use fixed values for various platforms or let the widget to 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:

boxfit

Use the AspectRatio widget

aspectratio in flutter

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 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 percentage rather than hardcoded values.

flexible and expanded code sample

flexible and expanded samples

Use FractionallySizedBox widgets

fractionnallySizeBox

Sometimes your design calls for dimensions that are relative, for example, a button occupies 80% of the app's width whereas 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.

custom

Useful links

  1. https://flutter.dev/docs/development/ui/layout/responsive

  2. https://medium.com/flutter-community/tagged/responsive-design

  3. https://www.raywenderlich.com/4324124-responsive-design-for-flutter-getting-started

  4. Source code

Best of luck,

Nazar Cybulskij, Flutter evangelist, @inVerita


COMMENTS
It`s all about People
151 New Park Ave, Hartford, CT 06106
Lviv 102, Ivan Franko str
Ivano-Frankivsk 34, Sakharova Str
Follow us