How to make button width match parent?

Question

I want to know that how can I set a width to match parent layout width

new Container(
  width: 200.0,
  padding: const EdgeInsets.only(top: 16.0),
  child: new RaisedButton(
    child: new Text(
      "Submit",
      style: new TextStyle(
        color: Colors.white,
      )
    ),
    colorBrightness: Brightness.dark,
    onPressed: () {
      _loginAttempt(context);
    },
    color: Colors.blue,
  ),
),

I know about little bit on Expanded widget but Expanded expands view to both direction, i dont know how to do it.

Yes I attach column instead of Container but width of button is Wrap Content how can stretch width to parent — Mohit Suthar, Apr 25 '18 at 05:21
You can simply use a FlatButton and wrap it inside a container and add width of the container to screen width by using mediaquery look for my answer below — Mahesh Jamdade, Feb 16 '19 at 02:44

score 438 · Accepted Answer · edited Mar 19 '23 at 03:51

438

Update:

With Flutter 2.0 RaisedButton is deprecated and replaced by ElevatedButton. you can use minimumSize like this:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    minimumSize: Size.fromHeight(40), // fromHeight use double.infinity as width and 40 is the height
  ),
  onPressed: () {},
  child: Text('Text Of Button'),
)

Old answer for Flutter less than 2.0:

The correct solution would be to use the SizedBox.expand widget, which enforces its child to match its parent's size.

SizedBox.expand(
  child: RaisedButton(...),
)

There are many alternatives, which allows for more or less customization:

SizedBox(
  width: double.infinity,
  // height: double.infinity,
  child: RaisedButton(...),
)

or using a ConstrainedBox

ConstrainedBox(
  constraints: const BoxConstraints(minWidth: double.infinity),
  child: RaisedButton(...),
)

edited Mar 19 '23 at 03:51

Jared Burrows

54,294
25
151
185

answered Apr 25 '18 at 08:09

Rémi Rousselet

256,336
79
519
432

55

SizedBox.expand will make the button take full width and height, which is not the question about. The question is about a button covering full width only not height. – Vinoth Kumar May 28 '18 at 10:35
3

@RémiRousselet Vinoth's comment is valid. Since this is now the accepted answer, could you add the right constructors for SizedBox to specifically expand only the width? – user823447 Apr 21 '19 at 00:04
I'm receiving this error `Failed assertion: line 1645 pos 12: '!_debugDoingThisLayout': is not true.` – minato Jan 18 '20 at 09:40
4

Why couldn't we just change the width of the container like this: `Container(width: double.infinity)` instead of wrapping it with another widget like `SizedBox`. It's much simpler to read and brings the same results. – Sameen Jun 19 '20 at 16:51
So if I have to understand what the Size.fromHeight exactly does, what's a good place to learn? – Harsha May 31 '22 at 06:17
` double.infinity` will getting the full width thank you – Mohamed Raza Sep 12 '22 at 17:14

score 52 · Answer 2 · edited May 08 '20 at 05:39

52

Container(
  width: double.infinity,
  child: RaisedButton(...),
),

edited May 08 '20 at 05:39

answered May 22 '18 at 16:06

Vinoth Kumar

12,637
5
32
38

score 44 · Answer 3 · answered Apr 25 '18 at 05:27

After some research, I found out some solution, and thanks to @Günter Zöchbauer,

I used column instead of Container and

set the property to column CrossAxisAlignment.stretch to Fill match parent of Button

    new Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                new RaisedButton(
                  child: new Text(
                      "Submit",
                      style: new TextStyle(
                        color: Colors.white,
                      )
                  ),
                  colorBrightness: Brightness.dark,
                  onPressed: () {
                    _loginAttempt(context);
                  },
                  color: Colors.blue,
                ),
              ],
            ),

`Column`/`Row` shouldn't be used for single-child layout. Use the single-child alternative instead. Such as `Align`, `SizedBox`, and similar. — Rémi Rousselet, Apr 25 '18 at 08:10

score 42 · Answer 4 · edited Dec 30 '18 at 12:45

The size attribute can be provided using ButtonTheme with minWidth: double.infinity

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 32 · Answer 5 · edited Dec 07 '19 at 18:34

The simplest way is to use a FlatButton wrapped inside a Container, The button by default takes the size of its parent and so assign a desired width to the Container.

            Container(
                  color: Colors.transparent,
                  width: MediaQuery.of(context).size.width,
                  height: 60,
                  child: FlatButton(
                    shape: new RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0),
                    ),
                    onPressed: () {},
                    color: Colors.red[300],
                    child: Text(
                      "Button",
                      style: TextStyle(
                        color: Colors.black,
                        fontFamily: 'Raleway',
                        fontSize: 22.0,
                      ),
                    ),
                  ),
                )

Output:

score 13 · Answer 6 · edited May 17 '21 at 08:24

You can set match parent of the widget by

1) set width to double.infinity :

new Container(
          width: double.infinity,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),

2) Use MediaQuery:

new Container(
          width: MediaQuery.of(context).size.width,
          padding: const EdgeInsets.only(top: 16.0),
          child: new RaisedButton(
            child: new Text(
                "Submit",
                style: new TextStyle(
                  color: Colors.white,
                )
            ),
            colorBrightness: Brightness.dark,
            onPressed: () {
              _loginAttempt(context);
            },
            color: Colors.blue,
          ),
        ),

You have a typo in "MediaLQuery", I can't edit a single character ;) — MappaM, May 06 '21 at 07:06

score 7 · Answer 7 · answered Sep 18 '18 at 08:37

@Mohit Suthar,

Found one of the best solution for match parent to width as well as height as below

new Expanded(
          child: new Container(
              padding: EdgeInsets.all(16.0),
              margin: EdgeInsets.all(16.0),
              decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius:
                      const BorderRadius.all(const Radius.circular(8.0)),
                  border: new Border.all(color: Colors.black, width: 1.0)),
              child: new Text("TejaDroid")),
        ),

Here you can check that the Expanded Controller acquire whole remain width and height.

score 7 · Answer 8 · answered Jun 03 '19 at 18:18

7

For match_parent you can use

SizedBox(
  width: double.infinity, // match_parent
  child: RaisedButton(...)
)

For any particular value you can use

SizedBox(
  width: 100, // specific value
  child: RaisedButton(...)
)

answered Jun 03 '19 at 18:18

CopsOnRoad

237,138
77
654
440

score 6 · Answer 9 · edited May 17 '21 at 08:25

6

The simplest way to give match-parent width or height in the given code above.

...
width: double.infinity,
height: double.infinity,
...

edited May 17 '21 at 08:25

iDecode

22,623
19
99
186

answered Mar 28 '19 at 07:47

bunny

1,316
2
13
22

score 5 · Answer 10 · answered Sep 30 '21 at 08:00

There are many ways to make full width button. But I think you should understand the concept of making full width widgets in different scenarios:

When you are using nested widgets then it is hard to identify width of parent widget. Simply you can't specify width in nested widgets. So you should use either Expanded or Column with CrossAxisAlignment as Strech.

In other cases, you can use media query width or double.infinity.

Here are some examples for Nested widgets and single widget:

First:

Expanded(   // This will work for nested widgets and will take width of first parent widget.
  child: MaterialButton(
    onPressed: () {},
    child: const Text("Button Text"),
    color: Colors.indigo,
    textColor: Colors.white,
  )
)

Second:

Column( // This will not work if parent widget Row.
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    MaterialButton(
      onPressed: () {},
      child: const Text("Button Text"),
      color: Colors.indigo,
      textColor: Colors.white,
    )
  ]
)

Third:

ButtonTheme( // if use media query, then will not work for nested widgets.
  minWidth: double.infinity,  //Or use 'width: MediaQuery.of(context).size.width'
  child: MaterialButton(
    onPressed: () {},
    child: const Text("Button Text"),
    color: Colors.indigo,
    textColor: Colors.white,
  )
)

Forth:

SizedBox( // if use media query, then will not work for nested widgets.
  width: double.infinity, //Or use 'width: MediaQuery.of(context).size.width'
  child: MaterialButton(
    onPressed: () {},
    child: const Text("Button Text"),
    color: Colors.indigo,
    textColor: Colors.white,
  )
)

Fifth:

Container( // if use media query, then will not work for nested widgets.
  width: double.infinity, //Or use 'width: MediaQuery.of(context).size.width'
  child: MaterialButton(
    onPressed: () {},
    child: const Text("Button Text"),
    color: Colors.indigo,
    textColor: Colors.white,
  )
)

From my point of view, recommended will be the First one. Also you can change MaterialButton to ElevatedButton or TextButton or RaisedButton (Depreciated) or any other widget.

Cheers!

score 3 · Answer 11 · edited May 17 '21 at 08:25

3

you can do that with MaterialButton

MaterialButton(
     padding: EdgeInsets.all(12.0),
     minWidth: double.infinity,
     onPressed: () {},
    child: Text("Btn"),
)

edited May 17 '21 at 08:25

iDecode

22,623
19
99
186

answered Jan 23 '20 at 02:45

Mahmoud Abu Alheja

3,343
2
24
41

score 3 · Answer 12 · answered Aug 28 '21 at 20:29

You can set the fixedSize.width of the ButtonStyle to a very large number, like double.maxFinite. You can also use Size.fromWidth() constructor if you don't want to specify the height:

ElevatedButton(
  child: const Text('Button'),
  style: ElevatedButton.styleFrom(
    fixedSize: const Size.fromWidth(double.maxFinite),
  ),
),

Live Demo

score 2 · Answer 13 · answered Feb 08 '20 at 12:25

The most basic approach is using Container by define its width to infinite. See below example of code

Container(
    width: double.infinity,
    child:FlatButton(
        onPressed: () {
            //your action here
        },
        child: Text("Button"),

    )
)

score 2 · Answer 14 · answered Mar 03 '20 at 11:39

         OutlineButton(
              onPressed: () {
                logInButtonPressed(context);
              },
              child: Container(
                width: MediaQuery.of(context).size.width / 2,
                child: Text(
                  “Log in”,
                  textAlign: TextAlign.center,
                ),
              ),
            )

Something like this works for me.

score 1 · Answer 15 · answered Aug 17 '18 at 06:39

1

The Following code work for me

       ButtonTheme(
            minWidth: double.infinity,
            child: RaisedButton(child: Text("Click!!", style: TextStyle(color: Colors.white),), color: Colors.pink, onPressed: () {}))

answered Aug 17 '18 at 06:39

Rinkesh

3,150
28
32

score 1 · Answer 16 · edited Oct 30 '18 at 02:02

1

This is working for me in a self contained widget.

  Widget signinButton() {
    return ButtonTheme(
      minWidth: double.infinity,
      child: new FlatButton(
        onPressed: () {},
        color: Colors.green[400],
        textColor: Colors.white,
        child: Text('Flat Button'),
      ),
    );
  }

// It can then be used in a class that contains a widget tree.

edited Oct 30 '18 at 02:02

Anh Pham

2,108
9
18
29

answered Oct 29 '18 at 23:58

PaulDef515

11
3

score 1 · Answer 17 · answered Apr 08 '19 at 01:20

This is working for me.

    SizedBox(
             width: double.maxFinite,
             child: RaisedButton(
                 materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                 child: new Text("Button 2"),
                 color: Colors.lightBlueAccent,
                 onPressed: () => debugPrint("Button 2"),
              ),
     ),

score 1 · Answer 18 · answered Feb 03 '20 at 09:06

1

RaisedButton( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [Text('Submit')], ) ) It works for me.

answered Feb 03 '20 at 09:06

TaoZang

1,690
2
15
15

RuslanBek · Answer 19 · 2021-05-08T08:50:14.577

With Flutter 2.0 RaisedButton is deprecated and replaced by ElevatedButton.

minimumSize property of ElevatedButton widget exactly does that.

Example code:

ElevatedButton(
            style: ElevatedButton.styleFrom(
              primary: Colors.green,
              onPrimary: Colors.white,
              shadowColor: Colors.greenAccent,
              elevation: 3,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0)),
              minimumSize: Size(100, 40), //////// HERE
            ),
            onPressed: () {},
            child: Text('MyButton'),
          )

score 0 · Answer 20 · edited Dec 09 '19 at 02:25

0

Using a ListTile also works as well, since a list fills the entire width:

ListTile(
  title: new RaisedButton(...),
),

edited Dec 09 '19 at 02:25

cokeman19

2,405
1
25
40

answered May 28 '18 at 09:19

Oush

3,090
23
22

score 0 · Answer 21 · answered Jul 11 '18 at 13:30

0

 new SizedBox(
  width: 100.0,
     child: new RaisedButton(...),
)

answered Jul 11 '18 at 13:30

Raj008

3,539
2
28
26

score 0 · Answer 22 · answered Jan 18 '20 at 09:59

0

This one worked for me

width: MediaQuery.of(context).size.width-100,

answered Jan 18 '20 at 09:59

minato

2,028
1
18
30

score 0 · Answer 23 · edited Apr 22 '21 at 12:38

0

Wrap your (child widget having a fixed width) with a center widget. This will center your widget:

Center(child:Container(width:250,child:TextButton(child:Text("Button Name),),)

edited Apr 22 '21 at 12:38

mousetail

7,009
4
25
45

answered Apr 22 '21 at 06:32

A.K.J.94

492
6
14

score 0 · Answer 24 · answered Jun 24 '22 at 12:06

TextButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.blue),
                fixedSize: MaterialStateProperty.all(
                  Size(double.maxFinite, 50.0),
                ),
              ),
              onPressed: () {},
              child: Text('Upgrade to Premium'),
            ),

score -1 · Answer 25 · answered Nov 02 '22 at 11:07

-1

TRY

Flexible(
 child: Row(
  children: [
    ElevatedButton(
     onPressed: () {},
     child: Text("love you}"),
   ),
  ],
 ),
),

answered Nov 02 '22 at 11:07

FatherNight arab

1

1

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Nov 05 '22 at 11:09

How to make button width match parent?

25 Answers25

Live Demo

Linked