Ancho del botón Coincidir con el padre

Quiero saber cómo puedo establecer un ancho para que coincida con el ancho del diseño principal

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

Sé un poco sobre el Expandedwidget, pero Expandedamplía la vista en ambas direcciones, no sé cómo hacerlo.

La solución correcta sería usar el SizedBox.expandwidget, que lo obliga childa coincidir con el tamaño de su padre.

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

Existen muchas alternativas, lo que permite más o menos personalización:

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

o usando un ConstrainedBox

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

El atributo de tamaño se puede proporcionar ButtonThemeconminWidth: double.infinity

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

o después de https://github.com/flutter/flutter/pull/19416 aterrizó

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

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

La forma más sencilla es utilizar un FlatButtonenvuelto dentro de un Container. El botón por defecto toma el tamaño de su padre y así asigna un ancho deseado al 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,
                      ),
                    ),
                  ),
                )

Salida:

Después de investigar un poco, encontré una solución y, gracias a @ Günter Zöchbauer,

Usé columna en lugar de contenedor y

establezca la propiedad en la columna CrossAxisAlignment.stretch para 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,
                ),
              ],
            ),

Puede establecer la coincidencia de padre del widget por

1) establezca el ancho en 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) Utilice MediaQuery:

new Container(
          width: MedialQuery.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,
          ),
        ),

@Mohit Suthar,

Encontré una de las mejores soluciones para hacer coincidir el padre con el ancho y la altura como se muestra a continuación

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

Aquí puede comprobar que el Expandedcontrolador adquiere el ancho y la altura del resto .

Esto funcionó para mí.

La forma más sencilla de dar ancho o alto al padre coincidente en el código dado arriba.

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

Porque match_parentpuedes usar

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

Para cualquier valor en particular puede utilizar

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

El siguiente código funciona para mí

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

Esto me funciona en un widget autónomo.

  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.

Esto es trabajo para mí.

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

El uso de a ListTiletambién funciona, ya que una lista ocupa todo el ancho:

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

puedes hacerlo con MaterialButton

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

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

Este funcionó para mi

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

RaisedButton( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [Text('Submit')], ) ) Esto funciona para mi.

El enfoque más básico es usar Container definiendo su ancho en infinito. Vea el siguiente ejemplo de código

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

    )
)

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

Algo como esto funciona para mí.

Coloque su RaisedButton(...)en unSizedBox

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