flutterdart

How to make button width match parent?


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.


Solution

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