How to apply flex in flutter

Question

I am a beginner in a flutter, and I have learned how to handle the sizing and text rendering when the screen sizing changes from desktop to tablet to mobile. But I want to understand how can I change the sizing or flex the content when I am decreasing the screen size within the same screen mode.

For Instance -

return Container(
  child: new Row(
    children: <Widget>[
      new Column(
        children: <Widget>[new Text("Hello World")],
      ),
      new Column(
        children: <Widget>[
          new Text(
              "This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is ")
        ],
      )
    ],
  ),
);

With this scenario when I try to decrease the screen size from desktop to table I start getting oveflow exception. Please guide me on how to handle it.

you can wrap your widget with `Flexible` or `Expanded` widget, and use flex property inside `Flexible` or `Expanded` widget — Kaveh Karami, Dec 21 '21 at 13:14

score 25 · Answer 1 · answered Feb 24 '20 at 16:31

Expanded is Similar to Flex and supports adding flex,

You can wrap your children with Expanded and give flex as below

Updated Code :

Container(
  child: new Row(
    children: <Widget>[
      new Expanded ( 
        flex:1,
        child : Column(
        children: <Widget>[new Text("Hello World")],
      ),),
      new Expanded( 
        flex :2,
        child: Column(
        children: <Widget>[
          new Text(
              "This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is ")
        ],
      ),)
    ],
  ),
)

Expanded : A widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

You can read more at official docs here

score 9 · Answer 2 · answered Feb 24 '20 at 16:40

Widgets inside a Flex widget (eg. Column, Row) can be wrapped in the Flexible widget. The Flexible widget has flex propery. Flutter has 3 flexible widgets: Flexible, Expanded and Spacer

return Container(
child: new Row(
  children: <Widget>[
    Flexible(
      flex: 1 /*or any integer value above 0 (optional)*/,
      child: Column(
        children: <Widget>[
          Expanded(
              flex: 1 /*or any integer value above 0 (optional)*/,
              child: new Text("Hello World")),
        ],
      ),
    ),
    new Column(
      children: <Widget>[
        new Text(
            "This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is This is a long text this is a long test this is ")
      ],
    )
  ],
),

);

How to apply flex in flutter

2 Answers2