The ability to react or change quickly can be termed as being responsive.
User experience plays a very important role in the success of any mobile, web, or desktop application. Creating an application that responds according to the user's device screen size is a must.
Depending on the user's preference, applications can be used on various devices, including phones, tablets, smartwatches and computers. So, a developer must always keep this in mind and develop applications accordingly.
Making a product responsive is not that difficult since every framework has its own method for that. We can surely get a lot of documentation and assistance on their official page.
Flutter has provided developers with many options to achieve responsiveness in a Flutter project (mobile, web and desktop); so that an app is viewable in any screen size and orientation per the user's preference.
We will learn the great features Flutter has provided us with in this blog.
Responsive Layout Approaches
- LayoutBuilder
- MediaQuery
- AspectRatio
- FittedBox
- FractionallySizedBox
- OrientationBuilder
LayoutBuilder
Like the builder widget in Flutter, the LayoutBuilder class provides the builder function and gives the respective parent constraints during the layout time. It simply takes help from the builder with a widget and brings changes to the view.
Here, we're modifying the screen's UI using the maxWidth property.
When the screen width is 500 pixels or more, the layout builder will return the widgets VerticalView() and HorizontalView(), respectively. The example code snippet is given below for LayoutBuilder syntax.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth >= 500) {
return HorizontalView();
} else {
return VerticalView();
},},),LayoutBuilderMediaQuery
Due to its simple implementation in the code, MediaQuery is one of the most popular approaches. It gives some layout settings and precise screen sizes for the related application.
We can access it by calling MediaQuery.of(context) in the build method of the class. The application will get rebuilt whenever there are changes in the MediaQueryData.
In the syntax example below, MediaQuery.of(context) provides media query data like screen size, brightness mode, etc. MediaQuery.of(context).size.width and MediaQuery.of(context).size.height provides the size of the screen.
Container(
height:MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.green,
child: Text('This container will cover the whole screen.')
)MediaQueryAspectRatio
As the title suggests, the aspect ratio is the ratio between height and width, respectively. The aspect ratio is set to 2:1, meaning the width should be twice as wide as the height. The constraints have an aspect ratio of less than 2:1. The application attempts to use the available space's width as a reference. The height will be half as large as the width.
AspectRatio(
aspectRatio: 1 / 2,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
)AspectRatioFittedBox
The FittedBox widget is a simple widget that can create a snappier and more organized way to contain a child inside of a parent. The FittedBox is mostly used to make the app's UI look cleaner for a better user experience. With the help of this widget, we can scale and position components according to the fit property.
The syntax example for the FittedBox widget is given below, where we have wrapped an asset image with the fit property set to BoxFit.contain, which will make the size as big as possible while containing the child within the parent.
FittedBox(
fit: BoxFit.contain,
child: SizedBox(
height:200,
child:Image.asset("assets/example.png"),
),
),FittedBoxFractionallySizedBox
A FractionallySizedBox is a widget in Flutter which sizes its respective class to a fraction of the available space of a device. FractionallySizedBox widgets are used when users want to set a button's width to 70% of the parent widget or when a container occupies 50% of the vertically available space.
The syntax for FractionallySizedBox is given below with an example, where we wrap a container with a border to take 50% of the available space of the device screen.
FractionallySizedBox(
widthFactor: 0.5,
heightFactor: 0.5,
alignment: FractionalOffset.center,
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
width: 4,
),
),
),
),FractionallySizedBoxOrientationBuilder
We have landscape and portrait modes, thanks to the orientation class. These viewpoints can be used to determine the device's orientation. Our format can be built using the constructor function of the OrientationBuilder. The builder's effort is taken into account when the orientation shifts. There are two possible values: Orientation.portrait and Orientation.landscape.
The syntax for the orientation builder is given below, which shows a grid with two columns if the screen is in portrait mode and a grid with three columns if the screen is in landscape mode.
OrientationBuilder(
builder: (context, orientation) {
return GridView.count(
// Create a grid with 2 columns in portrait mode,
// or 3 columns in landscape mode.
crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
);
},
),OrientationBuilderAdvantages of Responsive Layout
- Creating a responsive layout will be cost-effective because a single responsive design can be used for various devices.
- It provides flexibility, and changes can be made easily in the code.
- Responsiveness provides a better user experience.
- It helps to improve search engine optimization.
- It makes the application highly accessible.
Wrapping Up
We now understand the importance of responsiveness in the Flutter application and how to make our app responsive using different layout approaches. Making our work flexible might seem tricky, but it is very helpful in the long term when we have to add or remove changes in any application.
Thank you for reading. Subscribe using the buttons below to stay tuned in.