Correspondance de la largeur du bouton Parent: Flutter

Question

Je suis nouveau dans Flutter , je veux donc savoir comment définir une largeur pour correspondre à la largeur de la disposition parent

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

Je connais un peu la balise Expanded mais Expanded expand view dans les deux sens, je ne sais pas comment le faire. Aidez-moi si vous le savez, merci d'avance.

Answer 1

La bonne solution serait d'utiliser le widget SizedBox.expand , qui applique son child à la taille de son parent.

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

Il existe de nombreuses alternatives, ce qui permet une personnalisation plus ou moins:

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

ou en utilisant un ConstrainedBox

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

Answer 2

    new Container {
         width: double.infinity,
         child: new RaisedButton(...),
    }

Answer 3

Après quelques recherches, j'ai trouvé une solution, et grâce à @ Günter Zöchbauer,

J'ai utilisé la colonne au lieu du conteneur et

définissez la propriété sur la colonne CrossAxisAlignment.stretch pour remplir le parent de correspondance du bouton

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

Answer 4

L'attribut de taille peut être fourni en utilisant ButtonTheme avec minWidth: double.infinity

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

ou après que https://github.com/flutter/flutter/pull/19416 ait atterri

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

Answer 5

La manière la plus simple est d'utiliser un FlatButton enveloppé dans un Container , le bouton par défaut prend la taille de son parent et ainsi attribuer une largeur souhaitée au 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,
                      ),
                    ),
                  ),
                )
 

Production: