Set column width in flutter

Question

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.

Answer 1

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,

Answer 2

Limiting the width of a Column could be

1. Limiting the width of Column itself, use SizedBox

   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(),     ),   ], )