.

post

Making your Flutter application responsive

Kasia
Kasia, Flutter Developer
02.03.2022

Responsive - what does it really mean?

With Flutter 2.0 announcing possible app compatibility with mobile, tablet, web, smartwatches and even car displays, it is important to understand the great power of responsive applications. But what does it truly mean?

For an application to be responsive, its code has to respond to various changes of the layout. Its UI should act according to the shape and size of the device on which it is being displayed.

Flutter is a framework that focuses on developing great-looking applications on the device of your choice.  However, it can be quite challenging due to responsiveness. It  has to be implemented alongside all those screens with different widths and heights. Thankfully, the Flutter team and community came up with a few solutions to speed up the process.

The basics

The two basic approaches to creating responsive Flutter apps are:

MediaQuery.of()

This method is responsible for giving the size of the screen, its orientation etc. In short terms, it rebuilds the app whenever the user changes the screen size, allowing the display to work accordingly to set preferences. It is mostly put into use when there appears a need to work on the whole context of the application - not the size of a particular widget.

LayoutBuilder

This class helps you to: 

  • know how big your widget is going to be, 
  • decide how you are going to display it depending on its size.

Advanced options

There are however more options for responsiveness that are worth mentioning:

  • AspectRatio:
    This loosely fitted widget scales its child into a specific width to height ratio. Thanks to that, the widget keeps similar space even on different screen sizes.
  • CustomSingleChildLayout:
    This widget determines the layout of the child by using a delegate - a special class that uses functions such as shouldRelayout() or getSize() to position and resize a child widget. It can determine the size of the parent and its constraints to properly position the child.
  • CustomMultiChildLayout:
    This widget is a more complex version of its predecessor - CustomSingleChildLayout. It takes a delegate, in which all the magical positioning and sizing happens, and a list of children that are to become positioned. The delegate determines constraints for all of the children and the relationship between them. It is advised by the Google team to use CustomSingleChildLayout or Stack in simple cases, as they lack complexity of this widget.
  • OrientationBuilder:
    This class builds a widget tree that depends only on the parent widget’s orientation.
  • FractionallySizedBox:
    This widget sizes its child based on the specific fraction of the display that is provided to it.
  • FittedBox:
    This widget is used solely for boxes, as it fits box into its parent box based on given constraints. Thanks to that, fitting images or videos is no longer problematic and does not require manually calculating exact width and height of the child widget.

The community way

There is also another option to have responsive apps without loads of additional code and specific widgets that can take up a lot of lines. There are few packages created by Flutter's powerful community to help us with that problem - while also keeping our code neat and clean. The only downside is that these solutions are less flexible and customizable, thus not really suited for every responsiveness issue.

Responsive framework

The main catchphrase of this plugin is “Responsiveness made simple” - and it surely delivers as promised! It automates the scaling and resizing process to keep your UI neat and clean -  no matter what device it is on. The only thing you have to take care of is setting up breaking points, so the plugin knows where and how to act. Between every breakpoint, you can choose if you want to resize or autoscale your application interface - giving you more control over your design.

Flutter ScreenUtils

This plugin allows you to adapt screen and font size automatically fitting it to different devices. You only have to provide it with the default screen size you have been working on and then adding .w (stands for width) and .h (stands for height)  properties to each size that you haveused in the application. This easy trick will leave you with a UI that is responsive regardless of the device’s size

newsletter