Parent de correspondance de largeur de bouton

Je veux savoir comment puis-je définir une largeur correspondant à la largeur de la mise en page 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 peu de choses sur le Expandedwidget mais Expandedélargit la vue dans les deux sens, je ne sais pas comment le faire.

La solution correcte serait d'utiliser le SizedBox.expandwidget, ce qui oblige childà correspondre à la taille de son parent.

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

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

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

ou en utilisant un ConstrainedBox

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

L'attribut size peut être fourni en utilisant ButtonThemeavecminWidth: double.infinity

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

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

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

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

Le moyen le plus simple consiste à utiliser un FlatButtonencapsulé à l'intérieur d'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:

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

J'ai utilisé la colonne au lieu de Container et

définissez la propriété sur la colonne CrossAxisAlignment.stretch sur Fill match parent de 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,
                ),
              ],
            ),

Vous pouvez définir le parent correspondant du widget en

1) réglez la largeur sur 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) Utilisez 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,

Nous avons trouvé l'une des meilleures solutions pour faire correspondre le parent à la largeur et à la hauteur comme ci-dessous

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

Ici, vous pouvez vérifier que le Expandedcontrôleur acquiert toute la largeur et la hauteur du reste .

Cela a fonctionné pour moi.

Le moyen le plus simple de donner la largeur ou la hauteur de match-parent dans le code donné ci-dessus.

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

Car match_parentvous pouvez utiliser

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

Pour toute valeur particulière que vous pouvez utiliser

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

Le code suivant fonctionne pour moi

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

Cela fonctionne pour moi dans un widget autonome.

  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.

Cela fonctionne pour moi.

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

L'utilisation de a ListTilefonctionne également, car une liste remplit toute la largeur:

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

vous pouvez le faire avec MaterialButton

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

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

Celui-ci a fonctionné pour moi

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

RaisedButton( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [Text('Submit')], ) ) Ça marche pour moi.

L'approche la plus basique consiste à utiliser Container en définissant sa largeur sur l'infini. Voir ci-dessous l'exemple de code

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

Quelque chose comme ça fonctionne pour moi.

Placez votre RaisedButton(...)dans unSizedBox

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