How to make button width match parent?

Question

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

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

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

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

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: