Flutter: How to make a button expand to the size of its parent?

Question

I am trying to create square buttons, but Expanded doesn't seem to work the same as it does with containers. Take the following code for example

new Expanded(
 flex: 2,
   child: new Column(
     children: <Widget>[
       new Expanded(
         child:new Row(
           children: <Widget>[
             new Expanded(child: new MaterialButton(...)),
             new Expanded(child: new MaterialButton(....)),

             new Expanded(child: new Container(color: Colors.red)),
             new Expanded(child: new Container(color: Colors.green)),
           ]
         )
       )
     ],
   )
 )

 ....

It displays two buttons that are expanded horizontally, but not vertically. At the same time the containers will expand both horizontally and vertically. The same effect occurs if I do the following:

new Expanded(
 flex: 2,
   child: new Column(
     children: <Widget>[
       new Expanded(
         child:new Column(
           children: <Widget>[
             new Expanded(child: new MaterialButton(...)),
             new Expanded(child: new MaterialButton(....)),

             new Expanded(child: new Container(color: Colors.red)),
             new Expanded(child: new Container(color: Colors.green)),
           ]
         )
       )
     ],
   )
 )

 ....

Where I've changed the Row to Column. The buttons will expand vertically, but not horizontally, while the containers will do both.

Is there a way have my buttons expand to fit their parent both vertically and horizontally?

score 104 · Accepted Answer · answered Apr 06 '18 at 10:52

104

Add the crossAxisAlignment property to your Row;

crossAxisAlignment: CrossAxisAlignment.stretch

answered Apr 06 '18 at 10:52

Shady Aziza

50,824
20
115
113

5

Consider also SizedBox – Rémi Rousselet Apr 06 '18 at 11:53

score 29 · Answer 2 · edited Jul 28 '18 at 21:25

Wrapping with a ButtonTheme with minWidth: double.infinity allows to provide constraints

ButtonTheme(
  minWidth: double.infinity,
  child: MaterialButton(
    onPressed: () {},
    child: Text('Raised Button'),
  ),
),

or after https://github.com/flutter/flutter/pull/19416 landed

  MaterialButton(
    onPressed: () {},
    child: SizedBox.expand(
      width: double.infinity, 
      child: Text('Raised Button'),
    ),
  ),

score 12 · Answer 3 · answered Jun 08 '21 at 21:43

In Flutter 2.+ consider this solution:


ElevatedButton(
  style: ElevatedButton.styleFrom(
    minimumSize: const Size(double.infinity, double.infinity), // <--- this line helped me
  ),
  onPressed: () {},
  child: Icon(
    Icons.keyboard_return
  ),
)

CopsOnRoad · Answer 4 · 2019-08-04T06:59:12.827

6

You can also try it

Using SizedBox

SizedBox(
  width: double.maxFinite, // set width to maxFinite
  child: RaisedButton(...),
)

Use MaterialButton's minWidth property.

MaterialButton(
  minWidth: double.maxFinite, // set minWidth to maxFinite
  color: Colors.blue,
  onPressed: () {},
  child: Text("Button"),
)

edited Aug 04 '19 at 06:59

answered Aug 03 '19 at 02:25

CopsOnRoad

237,138
77
654
440

score 6 · Answer 5 · answered Apr 18 '20 at 09:04

6

We can add Button insider Container.

Solution:

Container(
            width: double.infinity,
            child: RaisedButton(
              onPressed: null,
              child: Text('NEXT'),
            ),
          )

answered Apr 18 '20 at 09:04

Jitesh Mohite

31,138
12
157
147

2

First, you should always use `SizedBox` instead of `Container` if you are not going to use any of the `Container` property except the `width` and `height`. Second, instead of directly jumping to `double.infinity`, you should try `double.maxFinite`, I can't think of an example at this time, but `double.infinity` can sometimes land you in trouble. – CopsOnRoad May 25 '20 at 12:57
See this about the diff. I think double.infinite should be used. https://stackoverflow.com/questions/61706455/whats-the-difference-between-double-infinity-and-double-maxfinite-in-dart – Rasmus Christensen Aug 27 '21 at 10:33

score 4 · Answer 6 · edited Aug 02 '20 at 04:58

4

you can insert under child:column

crossAxisAlignment: CrossAxisAlignment.stretch

My code

My result

edited Aug 02 '20 at 04:58

jizhihaoSAMA

12,336
9
27
49

answered Aug 02 '20 at 04:39

thaihoang305

49
1
1

score 0 · Answer 7 · answered Jun 29 '21 at 09:41

MaterialButton(
          minWidth: MediaQuery.of(context).size.width, // set minWidth to width of the device screen
          onPressed: () {},
          child: Text("Button"),
        )

for reference https://api.flutter.dev/flutter/widgets/MediaQuery-class.html

score 0 · Answer 8 · answered May 13 '23 at 07:51

From documentation and using button theme with styleFrom utility static method you can code like this:

/// To specify buttons with a fixed width and the default height use
/// `fixedSize: Size.fromWidth(320)`. Similarly, to specify a fixed
/// height and the default width use `fixedSize: Size.fromHeight(100)`.
ElevatedButton(
          onPressed: () {},
          child: Text('text'),
          style: ElevatedButton.styleFrom(
      fixedSize: const Size.fromWidth(double.infinity),
    ),
  )

score 0 · Answer 9 · answered Aug 03 '23 at 20:51

0

I have been able to achieve this using Flexible widget.

Wrap your button in a Flexiable widget and set the fit to Flexfit.tight.

answered Aug 03 '23 at 20:51

Kyros

72
4

score -1 · Answer 10 · answered Nov 09 '21 at 09:51

VisualDensity is the thing you are looking for. Add it to the ButtonStyle object.

ElevatedButton(
  style: const ButtonStyle(
    visualDensity: VisualDensity(
      horizontal: VisualDensity.maximumDensity,
      vertical: VisualDensity.maximumDensity,
    ),
  ),
  ...
),

Flutter: How to make a button expand to the size of its parent?

10 Answers10

Linked

Related