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.

Answer 1

By using Expanded and setting the flex property, we can give each widget in a Row or Column its own weight. That means how much of the available space of that widget it is allowed to fill. So we can have the following code for a horizontal alignment:

By default, Expanded takes the whole available space, so if we want 2 widgets to take 50% of the space, we can remove the flex property altogether.

Here's simple code example to understand:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Expanded"),
      ),
      body: Container(
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 6, // 60% of space => (6/(6 + 4))
              child: Container(
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 4, // 40% of space
              child: Container(
                color: Colors.purple,
              ),
            ),
          ],
        ),
      ),
    );
  }