CODEWITHSUNDEEP
flutterdartbuttonflutter-layoutflutter-widget
esthrim
esthrim

Reputation: 2130

Make buttons in a row have the same width in flutter

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.

Upvotes: 65

Views: 57275

Answers (5)

Mohammad Bilal Akbar
Mohammad Bilal Akbar

Reputation: 170

Use minimumSize of button in style property of Button in MaterialApp ThemeData widget to make button with same width in flutter:

        theme: ThemeData(
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
            minimumSize: const Size(250, 50),
            backgroundColor: Colors.blueGrey,
            textStyle: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold)
        ),
      ),
    ),

Upvotes: -1

Mudasir Habib
Mudasir Habib

Reputation: 848

Wrap you row with intrinsicWidth and button(any widget) with Expanded, this will give you all widgets with same width and width will equal to button with maximum size.

class MyWidget extends StatelessWidget {


 @override
  Widget build(BuildContext context) {
    return IntrinsicWidth(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
           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,
           ),
          )
        ],
      ),
    );
  }
}

Upvotes: 6

Ali Bagheri
Ali Bagheri

Reputation: 3419

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

Upvotes: 1

diegoveloper
diegoveloper

Reputation: 103361

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

Upvotes: 151

Viren V Varasadiya
Viren V Varasadiya

Reputation: 27137

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;

Upvotes: 8

Related Questions