While developing any application my be it’s web or mobile application, A Frontend developer should always keep in mind to make it responsive.
Below are few example to make a flutter application responsive:
1. Utilize flutter’s flexible layout widgets:
In flutter flexible widgets are Row, Column & Expanded widgets that can make a app responsive.
Row(
children: [
Expanded(child: Container(
color: Colors.red,
height: 100,
),),
Expanded(child: Container(
color: Colors.blue,
height: 200,
),)
],
)
2. Leverage Media Query for adoptive design:
App should be auto responsive depending on different screen size & the orientation & can be done using flutter MediaQuery class.
Container(
color: Colors.red,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
)
3. Design with device-agnostic elements
Relative dimensions & scalable fonts, you need to also make text content auto resize depending on screen size the app is running.
final textScaleFactor = MediaQuery.of(context).textScaleFactor; Text( 'Sample Text', style: TextStyle(fontSize: 16.0 * textScaleFactor), )
4. Use responsive flutter package
To make flutter application responsive we can make use of flutter_screenutil package that will make our work hand in making app responsive.
Container(
width: ScreenUtil().setWidth(200), // Set width based on the reference screen size
height: ScreenUtil().setHeight(100), // Set height based on the reference screen size
child: Text(
'Sample Text',
style: TextStyle(fontSize: ScreenUtil().setSp(16)), // Set font size based on the reference screen size
),
)
5. Optimize Image assets
Loading images in flutter app & making it optimize is an important task of flutter developer. Optimize image assets from different resolution using flutter Image.assets() widget parameter.
Image.asset(
'assets/images/flutter_bird.png',
width: 100,
height: 100,
fit: BoxFit.cover,
)
6. Implement device-specific layouts
LayoutBuilder & Orientation Builder are usually used to create a responsive UI in flutter application.
LayoutBuilder: Is a widget in flutter by which we can build a UI basied on constraints of it’s parrent widget, By using LayoutBuilder we can dynamically adjust the laput and the available space, code Snippet Example Below:
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// Use the constraints to build a responsive UI
if (constraints.maxWidth > 600) {
return DesktopLayout();
} else {
return MobileLayout();
}
},
)
2. OrientationBuilder: Depending on device orientation, may be it’s portrait or landscape mode, you need to build different UI’s when device is in different orientation mode.
OrientationBuilder(
builder: (BuildContext context, Orientation orientation) {
// Use the orientation to build a UI for each mode
if (orientation == Orientation.portrait) {
return showPortraitConfig();
} else {
return showLandscapeConfig();
}
},
)
7. Flutter app scrolling must be smooth
Make use of flutter’s sliver widget from efficient scrolling the complex layout
CustomScrollView(
slivers: <Widget>[
// SliverAppBar: A scrolling app bar that collapses when scrolling down
SliverAppBar(
title: Text('Custom Scroll View Example'),
floating: true,
// Additional configuration properties...
),
// SliverList: A scrollable list of items
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text('Item $index'),
);
},
childCount: 20, // Number of list items
),
),
// Additional slivers...
],
)
