I want to divide my row into 1/4 ratio in Flutter

Question

I want to divide my row in flutter into 4 columns with the same width. So far, the solution I came up with is this,

   child: Row(
        children: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.greenAccent),
          ),
          Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.yellow),
          ),
          Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.blue),
          ),
          Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.white),
          ),
        ],
      ),

Is there any alternative to this. Also dividing the row into 1/3 ratio would not work in this method.

Answer 1

You can achieve this by using an Expanded Widget

Check the code below:

It works perfectly well.

1) For 1/3 ratio

Row(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.greenAccent),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.yellow),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.blue),
          ),
        ),
      ],
    ),

1) For 1/4 ratio

Row(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.greenAccent),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.yellow),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.blue),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            width: MediaQuery.of(context).size.width * 0.25,
            decoration: BoxDecoration(color: Colors.white),
          ),
        ),
      ],
    ),

See output below:

I hope this answers your questions.

Answer 2

You can use Expanded or Flexible, by default it has flex: 1, and you can change the values depending on your need.

  Row(
    children: [
      Expanded(
        flex: 1, // you can play with this value, by default it is 1
        child: Child1(),
      ),
      Expanded(
        flex: 1, 
        child: Child2(),
      ),
      Expanded(
        flex: 1, 
        child: Child3(),
      ),
      Expanded(
        flex: 1, 
        child: Child4(),
      ),
    ],
  );