Set column width in flutter
I need to set a Column width in flutter, I have to do a layout with 3 sections, one should be 20% of the screen, the other one 60% and the last one 20%. I know that those 3 columns should be into a row, but I don't know a way to set the size, when I do that, the 3 columns take the same size.
I will appreciate any feedback.
Instead of hard-coding the size, I would suggest using Flex
like
Row(
children: <Widget>[
Expanded(
flex: 2, // 20%
child: Container(color: Colors.red),
),
Expanded(
flex: 6, // 60%
child: Container(color: Colors.green),
),
Expanded(
flex: 2, // 20%
child: Container(color: Colors.blue),
)
],
)
Which will produce like below,
Limiting the width
of a Column
could be
-
Limiting the
width
ofColumn
itself, useSizedBox
SizedBox( width: 100, // set this child: Column(...), )
2 (A). Limiting width
of children
inside Column
, without hardcoding values
Row(
children: <Widget>[
Expanded(
flex: 3, // takes 30% of available width
child: Child1(),
),
Expanded(
flex: 7, // takes 70% of available width
child: Child2(),
),
],
)
2 (B). Limiting width
of children
inside Column
, with hardcoding values.
Row(
children: <Widget>[
SizedBox(
width: 100, // hard coding child width
child: Child1(),
),
SizedBox(
width: 200, // hard coding child width
child: Child2(),
),
],
)