Make buttons in a row have the same width in flutter

Question

If I want to make two or more Buttons in a Row to have the same Width, how do I make it? For examples I have three RaisedButtons with different title let say Approve, Reject and Need Revise and if I put the three Buttons in a Row, they will have different Width and I don't want it. What I need is for they have the same Width.

Solution 1

You can use a Row wrapping your children with Expanded:

Row(
  children: <Widget>[
    Expanded(
      child: RaisedButton(
        child: Text('Approve'),
        onPressed: () => null,
      ),
    ),
    Expanded(
      child: RaisedButton(
        child: Text('Reject'),
        onPressed: () => null,
      ),
    ),
    Expanded(
      child: RaisedButton(
        child: Text('Need Revise'),
        onPressed: () => null,
      ),
    )
  ],
);

Solution 2

There are two ways:

1. Expanded widget it will divide space in equal parts. If you use all expanded widget for row of column.
2. Get the width of the screen and divide it into the required sizes equally.

Double width = MediaQuery.of(context).size.width;

Solution 3

can use new Buttons styles:

ElevatedButtonTheme(
      data: ElevatedButtonThemeData(style: ElevatedButton.styleFrom(minimumSize: Size(120,60))) ,
      child: ButtonBar(
        mainAxisSize: MainAxisSize.max,
        children: [
          ElevatedButton(
            child: Text('Ok'),
            onPressed: () {},
          ),
          ElevatedButton(
            child: Text('Cancel'),
            onPressed: () {},
          ),
        ],
      ),
    ),

Although diegoveloper's answer is faster

Comments

[Pawan]

Thanks I was using Flexible earlier, but using Expanded instead of Flexible solved y issue. Thanks

[questionasker]

how about if we want to make same size in a column ?

[Nihar Dodiya]

Hii how can i add space between button?

[pedro_bb7]

@coderInrRain check this link for your problem. stackoverflow.com/questions/51684730/…

[Hitesh Surani]

You're save my day!

[Kamlesh]

I have 7 buttons in a row. A row can have only 2-3 buttons as per available width of mobile. Kindly suggest me how can I wrap multiple buttons in row automatically? Thank you.

[Kamlesh]

I have 7 buttons in a row. A row can have only 2-3 buttons as per available width of mobile. Kindly suggest me how can I wrap multiple buttons in row automatically? Thank you.

[Firenze]

@NiharDodiya You can add space between buttons using SizedBox(width : <double number>),

[Tommie C.]

@Kamlesh - If you change the Row into a Wrap widget (in combination with some of the suggestions on this thread), I think you will get the desired effect.

[JAHelia]

and how to let those buttons have the same height ?