Comment définir la largeur et la hauteur d'un bouton dans Flutter ?

Question

J'ai vu que je ne peux pas définir la largeur d'un ElevatedButton en Flutter. Si j'ai bien compris, je devrais mettre le ElevatedButton dans un SizedBox. Je pourrai alors définir la largeur ou la hauteur de la boîte. Est-ce correct? Y a-t-il un autre moyen de le faire?

C'est un peu fastidieux de créer un SizedBox autour de chaque bouton, donc je me demande pourquoi ils ont choisi de faire de cette façon. Je suis sûr qu'ils ont une bonne raison de le faire mais je ne la vois pas. La structure est assez difficile à lire et à construire pour un débutant.

new SizedBox(
  width: 200.0,
  height: 100.0,
  child: ElevatedButton(
    child: Text('Blabla blablablablablablabla bla bla bla'),
    onPressed: _onButtonPressed,
  ),
),

Answer 1

Comme indiqué dans la documentation ici

Les boutons surélevés ont une taille minimum de 88.0 par 36.0 qui peut être remplacée avec ButtonTheme.

Vous pouvez le faire de cette manière

ButtonTheme(
  minWidth: 200.0,
  height: 100.0,
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

Answer 2

match_parent (Plein largeur):

SizedBox(
  width: double.infinity, // <-- match_parent
  height: double.infinity, // <-- match-parent
  child: ElevatedButton(...)
)

ou

SizedBox.expand(
  child: ElevatedButton(...)
) 

---

Largeur spécifique:

SizedBox(
  width: 100, // <-- Votre largeur
  height: 50, // <-- Votre hauteur
  child: ElevatedButton(...)
)

Answer 3

C'est parce que Flutter ne concerne pas la taille. Il s'agit des contraintes.

En général, nous avons 2 cas d'utilisation :

• L'enfant d'un widget définit une contrainte. La taille parentale elle-même est basée sur cette information. ex: Padding, qui prend la contrainte de l'enfant et l'augmente.
• Le parent impose une contrainte à son enfant. ex: SizedBox, mais aussi Column en mode étirement, ...

RaisedButton est le premier cas. Cela signifie que le bouton définit sa propre hauteur/largeur. Et, selon les règles matérielles, la taille du bouton relevé est fixe.

Si vous ne voulez pas ce comportement, vous pouvez donc utiliser un widget du deuxième type pour remplacer les contraintes du bouton.

---

Quoi qu'il en soit, si vous avez besoin de cela souvent, envisagez de créer un nouveau widget qui fait le travail pour vous. Ou utilisez MaterialButton, qui possède une propriété de hauteur.

Answer 4

Je recommanderais d'utiliser un MaterialButton, que vous pouvez faire comme ceci :

MaterialButton( 
 height: 40.0, 
 minWidth: 70.0, 
 color: Theme.of(context).primaryColor, 
 textColor: Colors.white, 
 child: new Text("push"), 
 onPressed: () => {}, 
 splashColor: Colors.redAccent,
)

Answer 5

Ce morceau de code vous aidera à mieux résoudre votre problème, car nous ne pouvons pas spécifier la largeur directement au RaisedButton, nous pouvons spécifier la largeur à son enfant

double largeur = MediaQuery.of(context).size.width;
var enfantMaxLargeur = SizedBox(
            width: largeur,
            child: Text(
              StringConfig.acceptButton,
              textAlign: TextAlign.center,
            ));

RaisedButton(
        child: enfantMaxLargeur,
        onPressed: (){},
        color: Colors.white,
    );