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

user_10573167 0
Viewed 10874

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.

flutter-layout flutter
3 Answers

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:

enter image description here

enter image description here

I hope this answers your questions.

user_134526400

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

As it's not mentioned in the above solutions. Flex is the proportion to be occupied in the available widget. If you're using 2 Expanded widgets one with flex 1 and the other with flex 3 then available space will be occupied as 1/4 by the first Expanded widget and 3/4 by the other.

user_149212110
Related