Pulsante Abbina larghezza padre

Voglio sapere come posso impostare una larghezza in modo che corrisponda alla larghezza del layout principale

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

Conosco un po 'di Expandedwidget ma Expandedespande la vista in entrambe le direzioni, non so come farlo.

La soluzione corretta sarebbe usare il SizedBox.expandwidget, che impone che childcorrisponda alla dimensione del suo genitore.

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

Ci sono molte alternative, che consentono una maggiore o minore personalizzazione:

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

o utilizzando un file ConstrainedBox

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

L'attributo size può essere fornito utilizzando ButtonThemeconminWidth: double.infinity

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

o dopo che https://github.com/flutter/flutter/pull/19416 è atterrato

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

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

Il modo più semplice è usare un FlatButtonavvolto all'interno di un Container, Il pulsante per impostazione predefinita prende la dimensione del suo genitore e quindi assegna una larghezza desiderata 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,
                      ),
                    ),
                  ),
                )

Produzione:

Dopo alcune ricerche, ho trovato una soluzione e grazie a @ Günter Zöchbauer,

Ho usato la colonna invece di Container e

impostare la proprietà sulla colonna CrossAxisAlignment.stretch per Fill match genitore di 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,
                ),
              ],
            ),

Puoi impostare la corrispondenza genitore del widget da

1) imposta la larghezza su 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) Usa 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,

Trovata una delle migliori soluzioni per abbinare il genitore alla larghezza e all'altezza come sotto

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

Qui puoi verificare che il ExpandedController acquisisca tutta la larghezza e l' altezza rimanenti .

Questo ha funzionato per me.

Il modo più semplice per fornire la larghezza o l'altezza del genitore di corrispondenza nel codice dato sopra.

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

Perché match_parentpuoi usare

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

Per qualsiasi valore particolare puoi usare

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

Il seguente codice funziona per me

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

Questo funziona per me in un widget autonomo.

  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.

Questo sta funzionando per me.

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

Anche l'uso di a ListTilefunziona, poiché un elenco riempie l'intera larghezza:

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

puoi farlo con MaterialButton

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

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

Questo ha funzionato per me

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

RaisedButton( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [Text('Submit')], ) ) Per me funziona.

L'approccio più semplice consiste nell'usare Container definendone la larghezza su infinito. Vedi sotto l'esempio di codice

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

Qualcosa di simile funziona per me.

Metti il ​​tuo RaisedButton(...)in un fileSizedBox

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