Develop A Responsive Layout Of Mobile App With Flutter
By: Sophia Martin
Tags: Mobile App Development, Mobile Apps, Technology, Startup, Flutter

Develop a Responsive Layout Of Mobile App With Flutter

With 3.5 billion smartphone users in 2020, expected to reach 3.8 billion in 2021, it is fair enough to say that demand for mobile apps has gracefully scaled from desktop to mobile. And this is due to the growing interest of the developers towards designing a highly responsive and interactive UI layout of applications.

While back in 2015, Google rolled out with a significant change in search engine algorithm and introduced a new rule for the website to be mobile responsive first. And, from there, designers have not just understood the importance of designing the responsive architecture in both desktop and non-desktop applications but also love designing responsive UI in-app to increase user experience.

However, implementing responsive UIs in the application becomes a complicated task for designers in real-life.

Whether it’s about configuring changes in the app, auto-rotating the content according to the screen, or making it compatible to display on both small and large screens. At any cost, your app needs to be responsive to the layout changes.

That’s where Flutter comes into the role and takes the momentum!

So in this guide, we will answer:

What is Responsive Design?

What is Futter, Why It’s So Demanding and What it Has Evolved In to?

How Flutter is Different and Help You Create a Responsive UI of the App?

Conclusion: Where To Go Next?

Let’s dig deep into each point to understand how to increase the responsiveness of the app with Flutter…

What is Responsive App Design?

Responsive design simply means using a single code set that responds to various changes to the layout of the devices. The responsive app lay out its UI according to the screen size and shape of the device. From smartwatch, phone, tablet to laptop, an app developed responsive UI can run on multiple devices without having to develop different interfaces of the application.

The same app will adjust the size of the page according to the screen when the user either resizes the window on the laptop or changes the orientation of the phone or tablet.

Important Elements to Focus To Create Responsive Layout

In recent years, developing a responsive app has become a hot topic of the town but how to make it happen in the real world? What essential things do you need to focus on?

In responsive design, there are majorly three things to consider- Size, Orientation, and Device type. When any one of these elements changes, the app UI changes. You can also choose to hire mobile app developer that can make it done for you. But..

Let’s make it simple for you to understand:

In the below image, we have a logo, logo title and subtitles, two fields, action button and background image.

But, when we run these components on four different devices, [small screen (480*800), medium screen (1080*1920), Large screen (1200*1920) and iPhone XR], observe the clear results.

In the small device screen, the layout components are breaking and going out of screen. The title is splitting into two lines and overall reduces the design impact. While other screens are looking fine but there are few minor differences.

So what’s the solution? In this blog, I’ll explain to you how to fix the UI problems of the app by using Flutter plugins.

But before that!

What is Flutter, Why It’s So Demanding and What it Has Evolved Into?

Flutter is defined as Google’s UI toolkit that allows developers building beautiful, natively compiled applications for multiple platforms including Mobile (iOS, Android), Desktop (Linux, Mac, Windows, Google Fuchsia) and web. With the launch of Flutter in 2015, Google has not just stolen the show again but also created a buzzword in the field of app development. That is why clients from all across the world are keen hiring flutter app development company in 2021.

Being based on Dart programming language and allowing developers to create an application for multiple platforms using a single codebase, Flutter is making good progress. It has become the second most popular choice of framework for developers.

By introducing Flutter, Google has marked incredible success in two significant aspects — in creating a genuinely platform-independent framework for Android and iOS native apps that work great for production use.

Now the question is what makes it so demanding for the app development?

Here’s a list of some features and qualities that makes it so demanding:

Being a cross-platform framework, it allows developers to create an app for iOS and Android by using the same code-base.

Flutter is an open-source framework, so it is free to use and provide extensive documentation and community support to make it easier even for beginners to get started with Flutter.

This framework is simple to learn and easy to use as it is based on Google’s in-house language that is Dart.

Despite being a young framework, Flutter has become a prime choice of leading companies like Google, Alibaba, eBay, Emaar and many more.

With hot reload feature, launching or updating a Flutter based app is quite simple and fast. Developers can instantly make changes in the code on emulators, simulators and hardware in a second, without having to restart the running app. It is one of the biggest reasons that make Flutter the first choice of developers for building UIs, fixing bugs and adding a new feature.

Hopefully, you are convinced that Flutter has become so famous for developing applications. As far as building a responsive layout in the application, Android and iOS adopt different approaches to handle layouts for different screen sizes natively.

To handle various screen sizes and pixel densities, multiple concepts are used in Android including:

Android Approaches for Developing Responsive UI

ConstraintLayout: For creating a flexible and creative UI design that adapts to different screen sizes and dimensions.

For creating a flexible and creative UI design that adapts to different screen sizes and dimensions. SplitView: For separate layout files that fit different screen sizes and able to handle layout adjustments automatically as per the screen size of the device.

For separate layout files that fit different screen sizes and able to handle layout adjustments automatically as per the screen size of the device. Fragment: For extracting your UI logic into separate components, so you don’t need to define the reason separately.

For extracting your UI logic into separate components, so you don’t need to define the reason separately. VectorDrawable: For any kind of illustrations like icons, or vector graphics.

iOS Approaches for Developing Responsive UI

Auto Layout: Also known as Constraints that govern content in your app and automatically adjust the layout according to the specified constraints.

Also known as Constraints that govern content in your app and automatically adjust the layout according to the specified constraints. Size Classes: With size classes, iOS dramatically makes layout adjustments based on the size classes of a content area.

With size classes, iOS dramatically makes layout adjustments based on the size classes of a content area. UI Elements: There are few UI elements that developers use for building responsive UIs on iOS including UIStackView, UIViewController, UISplitViewController and more.

How Flutter is Different and Help You Create a Responsive UI of the App?

Just because we are claiming that creating responsive layouts in Flutter is quite more straightforward and easier, therefore, many of you are curious to ask these two questions instead of directly moving to hire software development company:

What widgets should I Use in App That adapts to Screens of Different Sizes? How Can You Get The Information About the Screen Size and How Can You Use It While Writing the UI Code?

We’ll answer these questions but let’s first talk about the second question because it is the heart of the issue.

So there are here major ways to meet your goals:

1. MediaQuery

One potential way to get information from the MediaQueryData of the MediaQuery root that is “InheritedWidget”. It provides some valuable information on Orientation and ScreenSize, that enables you to determine which layout to display based on the current orientation, what type of screen (mobile, tablet or Desktop), and screen size on which app is being displayed on.

Now the question is how to use it?

Let’s learn with the example of building a chat app in Flutter that responds to layout changes:

To get started with the changes in the layout of the chat page using MediaQuery, you need first to check the orientation from MediaQuery- If it is a landscape, then you’ll have a detail page.

You need to declare a child widget to use it later.

If you have a details page, then you can declare the child widget as a row of widgets.

For this, the row contains the list of chats as a first item.

After that, the next thing in a row is the chat page showing the conversation.

If you don’t have a detail page on the app, then the child will be the list of chats.

Lastly, you need to assign that child widget you created as a SafeArea.

Develop the app and make it run different screens and it will most likely this on Portrait and Landscape:

To make it happen, you need to go into the “ChatListPage.Dart” file in the Lib folder and have to replace the content of “build (Buildcontext Context)” with these above mentioned steps.

2. LayoutBuilder

The other way is to use a LayoutBuilder, a perfect alternative to MediaQuery that has been used to handle orientation changes. It is a builder widget just like a “StreamBuilder” or a “FutureBuilder”, that also gives BoxConstraints which enables you to determine the maximum and minimum height and width properties of the screen.

Let’s understand how this approach will work practically:

Firstly, you need to declare the LayoutBuilder as a SafeArea.

You need to determine whether the details page is using the maximum width of the parent widget. If it is greater than 600, then you have to have a detail page.

If you have a detail page, then declare the child as a row of widgets.

For this, the row contains the list of chats as a first item.

Next item in a row is the detail page showing the conversation.

Lastly, if you don’t have a detail page, it’ll be the list of chats.

Following these steps, you can build and test projects on different screens.

So these are the two major ways to check different orientations and screen sizes. But, how to make further adjustments with text?

Auto-Resizing Text Based on Parent Widget Size

If you notice the text in the above landscape screenshot, the coloured text is not resized correctly as per the layout of the screen. In that case, increasing the size of the font is quite daunting as it will go over the box. But using the Flutter Widget “FittedBox”, you can rightly scale the size according to the size of the parent widget.

This is how you can use this widget in a chat app:

To make changes in the text size , you need to follow “BoxFit.Contain” rules and try to go over these steps:

Firstly, you declare a FittedBox as a parent of the Text Widget.

Secondly, as you are using the BoxFit.Contain, you can fit to make it scale as big as it can without going out of the widget box.

Lastly, declare the original TEXT widget as a child.

Following the steps, you can see the improvement in the text size that automatically get adjusted with the screen size.

UI Architecture: Expandable and Flexible

App responsiveness is directly related to making your UI flexible and expandable with the right choice of widgets. And, the plugins that are really useful inside a column or a row. To fix the broken image to the screen, firstly you need to open the “ConversationalPage.Dart” file in that Lib folder. Then discover the line with “SquareGallery()” with TODO.

That widget will not appear, because it’s a child of “Column” and it doesn’t have enough information to determine its own height. So there you can wrap it in an “AspectRatio” widget to give it constraints.

In case if you are not able to find such constraints, then it will give you one that only follows the ratio provided by you. Moreover, in that case, the widget might overflow.

Final results, when you click on to attach the image button, then the image will come like this in both portrait and landscape screen.

CustomMultiChildLayout

Flutter also provides layout widget, that helps to size its child layout to a fraction of the total available space. It is especially useful inside Expandable and Flexible widgets.

With CustomMultiChildLayou, you can make your layout responsive, but how?

Since its a vast topic, so here we are explaining the basic code snippet below:

First, you need to declare a subclass of MultiChildLayoutDelegate.

Overlay the PerformLayout method, so you need to layout the children widgets using the LayoutChild and PositionChild methods.

Lastly, you need to return a boolean from ShouldRelayout if the widget should perform a layout again. The choice of the method depends upon your widget’s parameters.

Conclusion: Where To Go Next?

Most of you are wondering that from where you can get these plugins or widgets to make you app UI responsive. You can download the material by simply clicking on the interlinks of the blog, and you can choose to get connected with our experts.

Since Flutter has become a most demanding framework in the app development market, therefore, the majority of developers are looking forward to leveraging the features of Flutter.

There are plenty of guides, tutorials and official docs available for responsive apps in Flutter, but understanding the technicality of those tutorials is quite challenging for a novice. Therefore, we drafted things in this blog in a simple and straightforward manner to make you understand the concept.

Apart from the above mentioned widget, there are various other things that you need to know and understand. Therefore, we recommend you to hire an app development company that stands by your side at every step to make your Android/iOS app responsive with Flutter.