As we make every app as responsive, Flutter also supports responsive design with device screen’s or parent’s width and height.
You can set the width and height of your widget depends to screen size.
In case of ‘Container’ widget, you need to set the height and width. But if you want to set its size into full of screen’s width or half of screen width, then you need use any method for getting responsive layout.
Container with height 100 and width 200:
Container(
height: 200,
width: 300,
color: Colors.teal,
child: Text("hello"),
),
Output:
Table of Contents
Responsive Screen Methods
How to get width as screen width or percentage wise screen width like 50% ?
1. Media Query
MediaQuery is one of the best and simple method to get screen size of width and height.
Here MediaQuery.of(context).size.width is used to get device screen’s width and MediaQuery.of(context).size.height is used to get height.
Example Code (Full App code included)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = 'Responsive App';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: Text(appTitle),
),
body: BuildBody(),
),
);
}
}
class BuildBody extends StatefulWidget {
@override
_BuildBodyState createState() => _BuildBodyState();
}
class _BuildBodyState extends State<BuildBody> {
@override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.teal,
child: Text("hello"),
);
}
}
Output
Another example with height 75% (0.75) and width 50% (0.5) of screen size.
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height * .75,
color: Colors.teal,
child: Text("hello"),
);
}
2. Fractionally Sized Box
FractionallySizedBox is another method but similar to Media Query. Here widthFactor and heightFactor properties used instead of width and height.
Example
Widget build(BuildContext context) {
return FractionallySizedBox(
widthFactor: 0.75,
heightFactor: 0.9,
child: Container(
color: Colors.green,
child: Text('FractionallySizedBox'),
),
);
}
Output
3. Expanded
In this method, you can divide the total size of height and width into different width and height sections. The property ‘Flex’ decides the size of width or height. Let’s see an example:
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
width: MediaQuery.of(context).size.width,
color: Colors.lime,
child: Text(' flex 1, means 1 / 10 of total flext sum '),
)
),
Expanded(
flex: 3,
child: Container(width: MediaQuery.of(context).size.width,
color: Colors.teal,
child: Text(' flex 3, means 3 / 10 of total flext sum'),
)
),
Expanded(
flex: 6,
child: Container(width: MediaQuery.of(context).size.width,
color: Colors.cyan,
child: Text(' flex 6, means 6 / 10 of total flext sum'),
)
)
],
);
}
Here there are 3 Expanded widgets are there. All contain a property of Flex of total 10 (1 + 3 + 6 = 10).
So Flex = 1 means, 1 of 10 section height of total screen height(which is considered as 10).
Also Flex : 3 means 1 of 10.
If you want to split screen by Columns, then you need to define the width manually as well as if you split screen by Rows then you need to set the height manually.
Output for above code (Column Wise)
Row Wise Splitting
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
height: MediaQuery.of(context).size.height,
color: Colors.lime,
child: Text(' flex 2'),
)
),
Expanded(
flex: 3,
child: Container(
height: MediaQuery.of(context).size.height,
color: Colors.teal,
child: Text(' flex 3'),
)
),
Expanded(
flex: 5,
child: Container(
height: MediaQuery.of(context).size.height,
color: Colors.cyan,
child: Text(' flex 5'),
)
)
],
);
}
Output
4. Flexible
Similar to Expanded widget, Flex property is deciding the widget’s screen. But you need to set both width and height manually.
Example
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Flexible(
flex: 2,
child: Container(
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width,
color: Colors.lime,
child: Text(' flex 2'),
)
),
Flexible(
flex: 3,
child: Container(
height: MediaQuery.of(context).size.height * 0.5,
width: MediaQuery.of(context).size.width,
color: Colors.teal,
child: Text(' flex 3'),
)
),
Flexible(
flex: 5,
child: Container(
height: MediaQuery.of(context).size.height * 0.75,
width: MediaQuery.of(context).size.width,
color: Colors.cyan,
child: Text(' flex 5'),
)
)
],
);
}
Output
5. Aspect Ratio
aspectRatio is more customized. You can use this widget with help of Expanded and Align widgets. Here aspectRatio : 2/3 means 2 of 3 part, where 3 is the height and 2 is the width.
Example
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Expanded(
flex: 1,
child: Align(
alignment: Alignment.centerLeft,
child: AspectRatio(
aspectRatio: 2/3,
child:
Container(width: MediaQuery.of(context).size.width,
color: Colors.cyan,
child: Text(' 2 of 3 part of the height'),
),
),
)
),
Expanded(
flex: 2,
child: Align(
alignment: Alignment.centerRight,
child: AspectRatio(
aspectRatio: 1/3,
child:
Container(width: MediaQuery.of(context).size.width,
color: Colors.cyan,
child: Text(' 1 / 3 part of the height of this section'),
),
),
)
)
],
);
}
Output
There are more methods rather than above mentioned.. Browse and try yourself 🙂
Be First to Comment