Bouton pleine largeur, comment aligner le texte

Question

Essayer de savoir si je peux aligner le texte dans un bouton pleine largeur, c'est-à-dire un bouton qui a width: double.infinity

par exemple ceci:

ButtonTheme(
  minWidth: double.infinity,
  child: FlatButton(
    onPressed: () {},
    child: Text('Sign Out', textAlign: TextAlign.left),
  ),
)

produit un bouton de texte centré et l'alignement ne peut pas être modifié.

J'ai essayé quelques choses, mais je ne peux pas le comprendre, sauf si j'essaie de créer un bouton personnalisé.

J'essaie d'obtenir un bouton pleine largeur avec du texte: à gauche pour que l'utilisateur puisse cliquer n'importe où dans la ligne, et toujours obtenir l'effet de toucher du matériau.

Answer 1

J'ai découvert que la méthode de construction de RawMaterialButton l'enfant est toujours centré :

child: Center(
  widthFactor: 1.0,
  heightFactor: 1.0,
  child: widget.child,
),

Pour que le texte soit aligné au début/à gauche, vous pouvez lui donner une infinité, ce qui le rendrait aussi large que son parent, le widget Centre.

child: FlatButton(
  child: SizedBox(
    width: double.infinity,
    child: Text(
      'Sign out',
      textAlign: TextAlign.left,
    ),
  ),
  onPressed: () {},
);

Answer 2

Une solution simple consiste à définir le texte du bouton Aligner sur Alignment.centerLeft comme -

  MaterialButton(
  onPressed: () {},
    textColor: Colors.white,
    color: Colors.grey,
    child: Align(
       alignment: Alignment.centerLeft,
        child: Text(
           'SUBMIT',
            style: TextStyle(
            fontSize: 18, fontWeight: FontWeight.normal),
              ),
        ),
 ),

Sortie:

Answer 3

Un autre hack simple serait de placer le bouton dans une ligne avec un seul élément et de définir mainAxisAlignment sur start.

Row(
 mainAxisAlignment: MainAxisAlignment.start,
 children: <Widget>[
  FlatButton(
   onPressed: () {},
   child: Text('Sign Out')
  ),  // end of FlatButton
 ], // end of widgets
), // end of Row