Expanded Widget – Flutter Widget Guide By Flutter Agency
What is Expanded Widget?
Expanded Widget is a widget that expands a child of a Row Widget, Column Widget, or Flex so that the child fills the available space.
Why we need Expanded Widget ?
When a user wants to fill between widgets user can make use of this widget. For example, when you are working with Row Widget or Column Widget and using MainAxisAlignment.spaceBetween. It will leave a gap between children so, in order to fill the available space, we need it.
It will take over the dimension of a child along with the main axis of either Column Widget or Row Widget but the cross axis of the child not affected. For the column main axis is vertical and for the row main axis is horizontal.
It has two important parameters.
- Flex
- Child
Flex: Flex parameter used to so that the expansion of widgets can be made controllable.
Child: Child parameter is used to hold another widget and when multiple children are expanded, the available space is divided using the Flex factor.
Expanded with Column Widget
Consider Column Widget as having three children as a Container Widget so our code snippet will look like below :
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.all(20.0),
child: Text(
"1",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.indigo,
),
Container(
padding: EdgeInsets.all(20.0),
child: Text(
"This is Expanded",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.purple,
),
Container(
padding: EdgeInsets.all(20.0),
child: Text(
"2",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.indigo,
),
],
);
Above code will generate output as below :
without Expanded in a Column widget
Let’s wrap Container Widget with it so our code snippet will look like below :
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(20.0),
child: Text(
"1",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.indigo,
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(20.0),
child: Text(
"This is Expanded",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.purple,
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(20.0),
child: Text(
"2",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.indigo,
)),
],
);
with Expanded
Our code snippet will look like below :
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
padding: EdgeInsets.all(20.0),
child: Text(
"1",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.indigo,
),
),
Expanded(
flex: 3,
child: Container(
padding: EdgeInsets.all(20.0),
child: Text(
"This is Expanded",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.purple,
),
),
Expanded(
flex: 4,
child: Container(
padding: EdgeInsets.all(20.0),
child: Text(
"2",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.indigo,
)),
],
);
We will output like below :
Expanded width with Flex
Expanded with Row Widget
Take a simple example of Row Widget having three children as Container Widget.
Code Snippet :
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
padding: EdgeInsets.all(20.0),
child: Text(
"1",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.indigo,
),
Container(
padding: EdgeInsets.all(20.0),
child: Text(
"This is Expanded",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.purple,
),
Container(
padding: EdgeInsets.all(20.0),
child: Text(
"2",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.indigo,
),
],
);
Our output will look like below :
without Expanded
Our final code snippet will look like below :
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(20.0),
child: Text(
"1",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.indigo,
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(20.0),
child: Text(
"This is Expanded",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.purple,
),
),
Expanded(
child: Container(
padding: EdgeInsets.all(20.0),
child: Text(
"2",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.indigo,
),
),
],
);
with Expanded
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
padding: EdgeInsets.all(20.0),
child: Text(
"1",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.indigo,
),
),
Expanded(
flex: 3,
child: Container(
padding: EdgeInsets.all(20.0),
child: Text(
"This is Expanded",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.purple,
),
),
Expanded(
flex: 4,
child: Container(
padding: EdgeInsets.all(20.0),
child: Text(
"2",
style: TextStyle(
color: Colors.white,
),
),
color: Colors.indigo,
),
),
],
);
Above code will generate output as below :
with Expanded and flex
Key Notes :
- It has to be a child of a Flex widget otherwise the app will crash. Row widget and Column widget are both extend Flex widget so they count.
- If Row widget or Column widget has unbound size on its MainAxis then using it will cause problems.
Thanks for being with us !!!
FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.
FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.
