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.

Afterbrain

Perhaps a Column instead? – Besprent

Yes I attach column instead of Container but width of button is Wrap Content how can stretch width to parent – Afterbrain

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 – Heelpiece

Answer 1

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(...),
)

Amherst

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. – Magician

@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? – Tade

I'm receiving this error Failed assertion: line 1645 pos 12: '!_debugDoingThisLayout': is not true. – Vitrics

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. – Trouble

So if I have to understand what the Size.fromHeight exactly does, what's a good place to learn? – Lippold

` double.infinity` will getting the full width thank you – Talkie

Still works SizedBox on flutter version 3.13.3 – Monospermous

Answer 2

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

Magician

Answer 3

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

Afterbrain

Column/Row shouldn't be used for single-child layout. Use the single-child alternative instead. Such as Align, SizedBox, and similar. – Leroy

Answer 4

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'),
  ),
),

Hindi

Answer 5

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:

Heelpiece

Answer 6

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

Divertissement

You have a typo in "MediaLQuery", I can't edit a single character ;) – Koah

Answer 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(...)
)

Masbate

Answer 8

@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.

Barrows

Answer 9

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

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

Interlaken

Answer 10

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!

Danieu

Answer 11

you can do that with MaterialButton

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

Pelion

Answer 12

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

Euphrosyne

Answer 13

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"),

    )
)

Yolk

Answer 14

         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.

Stelly

Answer 15

The Following code work for me

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

Uptodate

Answer 16

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.

Croaker

Answer 17

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"),
              ),
     ), 

Caras

Answer 18

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

Handcraft

Answer 19

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'),
          )

Chancre

Answer 20

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

Manufacturer

Answer 21

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

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

Elated

Answer 22

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

Milesmilesian

Answer 23

This one worked for me

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

Vitrics

Answer 24

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

Picador

Answer 25

This code worked for me

SizedBox(
  width: double.infinity,
  child:  FilledButton(
          onPressed: () {}, child: const Text("Save Sale")),
)

Burrell

Answer 26

TRY

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

Capitulary

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Petulant