Set column width in flutter
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(),
),
],
)
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,