web-dev-qa-db-fra.com

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

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

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

new SizedBox(
  width: 200.0,
  height: 100.0,
  child: new RaisedButton(
    child: new Text('Blabla blablablablablablabla bla bla bla'),
    onPressed: _onButtonPressed,
  ),
),
flutter
33
OlivierGrenoble

Comme indiqué dans la documentation ici

Les boutons en relief ont une taille minimale de 88,0 sur 36,0 qui peut être remplacée par ButtonTheme.

Tu peux le faire comme ça

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

Pour match_parent vous pouvez utiliser

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

Pour toute valeur particulière, vous pouvez utiliser

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

C'est parce que le flutter n'est pas une question de taille. C'est à propos de contraintes.

Nous avons généralement 2 cas d'utilisation:

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

RaisedButton est le premier cas. Ce qui signifie que c'est le bouton qui définit sa propre hauteur/largeur. Et, selon les règles matérielles, la taille du bouton en relief est fixée.

Vous ne voulez pas ce comportement, vous pouvez donc utiliser un widget du second type pour remplacer les contraintes de bouton.

Quoi qu'il en soit, si vous en avez souvent besoin, envisagez de créer un nouveau widget qui fera le travail à votre place. Ou utilisez MaterialButton, qui possède une propriété height.

8
Rémi Rousselet

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

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

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

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

RaisedButton(
        child: maxWidthChild,
        onPressed: (){},
        color: Colors.white,
    );
3
Fayaz

Si vous souhaitez modifier globalement la hauteur et la largeur minimale de tous vos RaisedButtons, vous pouvez remplacer ThemeData dans votre MaterialApp:

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
       ...
       theme: ThemeData(
       ...
       buttonTheme: ButtonThemeData(
          height: 46,
          minWidth: 100,
       ),
    ));
  }
2
Saeed Masoumi

Vous devez utiliser un widget développé. Mais si votre bouton est sur une colonne, le widget développé remplit le reste de la colonne. Vous devez donc inclure le widget développé dans une ligne.

Row(children: <Widget>[
Expanded(
  flex: 1,
  child: RaisedButton(
    child: Text("Your Text"),
      onPressed: _submitForm,
    ),
  ),),])
1
Elton Morais

Ma méthode préférée pour créer un bouton Raise avec Match parent est l’enveloppement avec Container. ci-dessous est un exemple de code.

Container(
          width: double.infinity,
          child: RaisedButton(
                 onPressed: () {},
                 color: Colors.deepPurpleAccent[100],
                 child: Text(
                        "Continue",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  )
0
Hitesh Dhamshaniya

Si vous voulez que la RainseButton prenne la place du parent, veuillez essayer Expanded Widget

0
xinthink

vous pouvez faire ce qu'ils disent dans les commentaires ou vous pouvez économiser l'effort et travailler avec RawMaterialButton. qui ont tout et vous pouvez changer la frontière pour être circulaire et beaucoup d'autres attributs. forme ex (augmenter le rayon pour avoir une forme plus circulaire)

shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),//ex add 1000 instead of 25

et vous pouvez utiliser la forme de votre choix comme bouton en utilisant GestureDetector, un widget qui accepte un autre widget sous l'attribut enfant. comme dans l'autre exemple ici

GestureDetector(
onTap: () {//handle the press action here }
child:Container(

              height: 80,
              width: 80,
              child:new Card(

                color: Colors.blue,
                shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
                elevation: 0.0,                
              child: Icon(Icons.add,color: Colors.white,),
              ),
              )
)
0
youssef ali