web-dev-qa-db-fra.com

Flutter: comment faire en sorte qu'un bouton soit agrandi à la taille de son parent?

J'essaie de créer des boutons carrés, mais Expanded ne semble pas fonctionner de la même manière qu'avec les conteneurs. Prenez le code suivant par exemple

new Expanded(
 flex: 2,
   child: new Column(
     children: <Widget>[
       new Expanded(
         child:new Row(
           children: <Widget>[
             new Expanded(child: new MaterialButton(...)),
             new Expanded(child: new MaterialButton(....)),

             new Expanded(child: new Container(color: Colors.red)),
             new Expanded(child: new Container(color: Colors.green)),
           ]
         )
       )
     ],
   )
 )

 ....

Il affiche deux boutons qui sont développés horizontalement, mais pas verticalement. Dans le même temps, les conteneurs se dilateront horizontalement et verticalement. Le même effet se produit si je fais ce qui suit:

new Expanded(
 flex: 2,
   child: new Column(
     children: <Widget>[
       new Expanded(
         child:new Column(
           children: <Widget>[
             new Expanded(child: new MaterialButton(...)),
             new Expanded(child: new MaterialButton(....)),

             new Expanded(child: new Container(color: Colors.red)),
             new Expanded(child: new Container(color: Colors.green)),
           ]
         )
       )
     ],
   )
 )

 ....

Où j'ai changé la rangée en colonne. Les boutons se développeront verticalement, mais pas horizontalement, tandis que les conteneurs feront les deux.

Existe-t-il un moyen d’agrandir mes boutons pour qu’ils s’adaptent à leur parent verticalement et horizontalement?

flutterflutter-layout
17
fuzzylogical

Ajoutez la propriété crossAxisAlignment à votre Row;

crossAxisAlignment: CrossAxisAlignment.stretch
34
aziza

Envelopper avec un ButtonTheme avec minWidth: double.infinity permet de fournir des contraintes

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'),
    ),
  ),
12
Günter Zöchbauer

Vous pouvez aussi l'essayer

  1. Utiliser SizedBox

    SizedBox(
  width: double.maxFinite, // set width to maxFinite
  child: RaisedButton(...),
)

  2. Utilisez la propriété MaterialButton 'minWidth.

    MaterialButton(
  minWidth: double.maxFinite, // set minWidth to maxFinite
  color: Colors.blue,
  onPressed: () {},
  child: Text("Button"),
)
1
CopsOnRoad