Building responsive Flutter desktop and web apps

Flutter has grown over the years. compared with version 1.0 you can realise the tremendous new feature added to this awesome framework. This article is going to explain how to build responsive desktop applications in Flutter.

Since the introduction of Flutter desktop, there have been a number of desktop apps built with Flutter and some I have personally built myself. Responsiveness is one thing to have to worry about when developing any application that will run on different screens. We will look at two approaches to fix this issue in Flutter.

1. MediaQuery (MediaQuery.of(context).size)

For a better user experience, it is normal practice to have distinct UI layouts for different screen sizes when building an app for both phones, tablets and desktops. If the user has preferences for font sizes or wants to reduce animations. This is where MediaQuery comes into play; you can use it to obtain information about the current device size and user preferences, and then adapt your layout appropriately. MediaQuery gives a higher-level view of the current app’s screen size, as well as more specific information about the device and its layout preferences. In practice, MediaQuery is always present. It is easily obtained by invoking MediaQuery.of in the build method. Although MediaQuery does not handle responsiveness itself, it gives you the needed properties to determine the width and height of the device screen.

You can then seek up all kinds of useful information about the device you’re using, such as the screen size, and construct your layout appropriately. MediaQuery may also be used to determine the orientation of the current device or whether the user has changed the default font size. It may also be used, similarly to a safe area widget, to assess if areas of the screen are blocked by a system UI. Let’s take a look at an example of how to use MediaQuery.

Let’s look at the output of this code. You will realise that as the window gets smaller, the red section disappears.

code output

Now let’s do that same with a LayoutBuilder…

2. LayoutBuilder

The LayoutBuilder widget builds a widget tree that can depend on the parent widget’s size (a minimum and maximum width, and a minimum and maximum height).

Similar to the Builder widget except that the framework calls the builder function at layout time and provides the parent widget’s constraints. This is useful when the parent constrains the child’s size and doesn’t depend on the child’s intrinsic size. The LayoutBuilder’s final size will match its child’s size.

Let’s look at the output of this code. You will realise that as the window gets smaller, the red section disappears and an additional advantage is you have more control over how you layout the widgets. This approach is cleaner in my opinion.

code output

And that’s all for now. If you have any specific topic you would like me to write on, leave your suggestions in the comment section and also if you need any clarifications on this topic, do well to reach out to me on Twitter @_iamEtornam.

Full source code:

GitHub - iamEtornam/responsive-layouting

resources:

1. read more about MediaQuery class
2. read more about Layoutbuilder class