Set column width in flutter

Question

Asked by Joseph A on October 12, 2018 (source).

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

Question answered by Dinesh B (source).

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,

enter image description here

DART FLUTTER USER-INTERFACE
SHARE: