Demystifying responsive layout in Flutter
Flutter being a cross-platform app development framework supports devices with hugely varying screen sizes, it can run on a device as small as a smartwatch to devices like a large TV. It’s always a challenge to adapt your app to that variety of screen sizes and pixel densities using the same codebase.
There is no hard and fast rule for designing a responsive layout in Flutter. In this article, I will show you some of the approaches that you can follow while designing such a layout.
Before moving on to building responsive layouts in Flutter, I would like to throw some light on how Android and iOS handle layouts for different screen sizes natively.
Android approach
In order to handle different screen sizes and pixel densities, the following concepts are used in Android:
1. ConstraintLayout
One of the revolutionary things introduced in the Android world for UI designing is ConstraintLayout. It can be used for creating flexible and responsive UI designs that adapt to different screen sizes and dimensions. It allows you to specify the position and size for each view according to spatial relationships with other views in the layout.
For more information regarding
ConstraintLayout, check out this article here.
But this does not solve the issue with large devices, where stretching or just resizing the UI components is not the most elegant way of taking advantage of the screen real-estate. This also applies in case of devices, like smartwatches which have very little screen real-estate, and resizing the components to fit that screen size might result in a weird UI.
2. Alternative layouts
To solve the above issue, you can use alternative layouts for different sized devices. For example, you can use split view in devices like tablets to provide a good user experience and use the large screen real-estate wisely.
In Android, you can define separate layout files for different screen sizes and the Android framework handles the switching between these layouts automatically as per the screen size of the device.
3. Fragments
Using Fragment you can extract your UI logic into separate components so that while designing multi-pane layouts for large screen sizes you do not have to define the logic separately. You can just reuse the logic that you have defined for each fragment.
4. Vector graphics
Vector graphics create an image using XML to define paths and colors, instead of using pixel bitmaps. It can scale to any size without scaling artifacts. In Android, you can use VectorDrawable for any kind of illustration, such as icons.
iOS approach
The concepts used by iOS for defining responsive layouts are as follows:
1. Auto Layout
Auto Layout can be used for constructing adaptive interfaces where you can define rules (known as constraints) that govern the content in your app. Auto Layout automatically readjusts layouts according to the specified constraints when certain environmental variations (known as traits) are detected.
2. Size classes
Size classes are traits that are automatically assigned to content areas based on their size. iOS dynamically makes layout adjustments based on the size classes of a content area. On iPad, size classes also apply when your app runs in a multitasking configuration.
3. Some UI elements
There are few other UI elements that you can use for building responsive UI on iOS, like UIStackView, UIViewController, and UISplitViewController.
How Flutter differs
Even if you are not an Android or iOS developer, by this point you should have received an idea of how these platforms handle responsiveness natively.
In Android, for displaying multiple UI views on a single screen, you use Fragments which are like reusable components that can run inside an Activity of an app.
You can run multiple Fragments inside an Activity, but you cannot run multiple Activities in a single app at the same time.
In iOS, for controlling multiple view controllers, UISplitViewController is used, which manages child view controllers in a hierarchical interface.
Now, coming to Flutter.
Flutter has introduced the concept of widgets. They are basically, the building blocks that can be connected together to build an entire app.
Remember in Flutter, every screen and the entire app is also a widget!
Widgets are reusable by nature, so you do not need to learn any other concept while building responsive layouts in Flutter.
Responsiveness in Flutter
As I said earlier, I will go over the important concepts which are required for developing responsive layouts, and then it's your choice how you want to exactly implement it in your app.
1. MediaQuery
You can use MediaQuery for retrieving the size (width/height) and orientation (portrait/landscape) of the screen.
An example of this is as follows:
2. LayoutBuilder
Using the LayoutBuilder class you can get the BoxConstraints object, which can be used for determining the maxWidth and maxHeight of the widget.
REMEMBER: The main difference between
MediaQuery&LayoutBuilderis that MediaQuery uses the complete context of the screen rather than just the size of your particular widget. Whereas, LayoutBuilder can determine the maximum width and height of a particular widget.
An example demonstrating this is as follows:
3. OrientationBuilder
To determine a widget’s current orientation you can use the OrientationBuilder class.
REMEMBER: This is different from the device orientation which you can retrieve using
MediaQuery.
An example demonstrating this is as follows:
4. Expanded and Flexible
The widgets that are especially useful inside a Column or a Row are Expanded and Flexible. Expanded widget expands a child of a Row, Column, or Flex so that the child fills the available space, whereas Flexible does not necessarily have to fill the entire available space.
An example showing various combinations of Expanded and Flexible is as follows:
5. FractionallySizedBox
FractionallySizedBox widget helps to sizes its child to a fraction of the total available space. It is especially useful inside Expanded or Flexible widgets.
An example is as follows:
6. AspectRatio
You can use AspectRatio widget to size the child to a specific aspect ratio. First of all, it tries the largest width permitted by the layout constraints and decides the height by applying the given aspect ratio to the width.
We have looked into most of the important concepts required for building a responsive layout in Flutter, except one.
Let’s learn the last concept while building a sample responsive app.
Building a responsive app
Now, we will be applying some of the concepts that I have described in the previous section. Along with this, you will also learn another important concept for building layouts for large screens, that is split view.
We will be building a sample chatting app design called Flow.
The app will mainly consist of two major screens:
- HomePage (
PeopleView,BookmarkView,ContactView) - ChatPage (
PeopleView,ChatView)
HomePage
The main screen of the app after launch will be the HomePage. It consists of two types of views:
- HomeViewSmall (consisting of
AppBar,Drawer,BottomNavigationBar&DestinationView) - HomeViewLarge (consisting of split view,
MenuWidget&DestinationView)
Here, LayoutBuilder is for determining the maxWidth and switch between the HomeViewSmall and HomeViewLarge widgets.
IndexedStack with DestinationView is used for switching between the views according to the selected item in the BottomNavigationBar.
If you want to know more, check out the GitHub repository of this sample app present at the end of this article
For large screens, we will show a split view containing the MenuWidget and the DestinationView. You can see that it is really easy to create a split view in Flutter, you just have to place them side-by-side using a Row, and then in order to fill up the entire space just wrap both the views using Expanded widget. You can also define the flex property of the Expanded widget, which will let you specify how much part of the screen each widget should cover (by default flex is set to 1).
But, now if you move to a particular screen and then switch between the views, you will loose the context of the page, that is you will always return back to the first page that is Chats. To solve this here I have used multiple callback functions to return the selected page to the HomePage. Practically, you should use a state management technique to handle this scenario. As the sole purpose of this article is to teach you building responsive layouts, I am not going into the complexities of any state management.
Modifying HomeViewSmall:
Modifying HomeViewLarge:
Modifying HomePage:
Now, your fully responsive HomePage is complete.
ChatPage
This will be similar to the HomePage, but here it will consist of the following two views:
- ChatViewSmall (consisting of
AppBar,ChatList&SendWidgetwidget) - ChatViewLarge (consisting of
PeopleView,ChatList&SendWidgetwidget)
Here, I have used OrientationBuilder along with the LayoutBuilder, to vary the breakpointWidth according to the orientation as I do not want to display the PeopleView in small screen mobile while it is in landscape mode.
Conclusion
We have successfully created a fully responsive app in Flutter. There are a number of improvements you can still do in this app, one of them can be defining the fontSize to differ according to screen sizes.
While working with responsiveness, some of the amazing Flutter plugins that you can use are as follows:
Originally published on Codemagic Blog.
GitHub repo of the sample app is available in the following link:
Learn more
Check out my other articles
If you want to support me and want me to continue writing Flutter articles and building some interesting Flutter projects, please contribute to my Patreon page below:
You can follow me on Twitter and find some of my projects on GitHub. Also, don’t forget to checkout my Website. Thank you for reading, if you enjoyed the article make sure to show me some love by hitting that clap (👏) button!
Happy coding…
Souvik Biswas
