Flutter : Suppression du rembourrage dans les boutons - FlatButton, ElevatedButton, OutlinedButton

Question

Je cherche à supprimer la marge par défaut du bouton plat, mais je ne parviens pas à la définir ou à la remplacer.

Column(children: <Widget>[
      Container(
          children: [
            FractionallySizedBox(
              widthFactor: 0.6,
              child: FlatButton(
                  color: Color(0xFF00A0BE),
                  textColor: Color(0xFFFFFFFF),
                  child: Text('LOGIN', style: TextStyle(letterSpacing: 4.0)),
                  shape: RoundedRectangleBorder(side: BorderSide.none)))),
      Container(
          margin: const EdgeInsets.only(top: 0.0),
          child: FractionallySizedBox(
              widthFactor: 0.6,
              child: FlatButton(
                  color: Color(0xFF00A0BE),
                  textColor: Color(0xFF525252),
                  child: Text('SIGN UP',
                      style: TextStyle(
                          fontFamily: 'Lato',
                          fontSize: 12.0,
                          color: Color(0xFF525252),
                          letterSpacing: 2.0)))))
    ])

Je suis tombé sur des choses comme ButtonTheme et même debugDumpRenderTree() mais je n'ai pas été capable de les mettre en œuvre correctement.

Answer 1

Pour tous ceux qui se demandent comment remove the default padding around the text of a FlatButton vous pouvez utiliser Bouton de matière première à la place et définir les contraintes à BoxConstraints() qui remet à zéro la largeur et la hauteur minimales par défaut du bouton .

Bouton de matière première peut être utilisé pour configurer un bouton qui ne dépend pas de thèmes hérités. Nous pouvons donc personnaliser toutes les valeurs par défaut en fonction de nos besoins.

Exemple :

RawMaterialButton(
    constraints: BoxConstraints(),
    padding: EdgeInsets.all(5.0), // optional, in order to add additional space around text if needed
    child: Text('Button Text')
)

Veuillez vous référer à ce pour une personnalisation plus poussée.

Answer 2

Bouton de texte précédemment Bouton plat

A supprimer l'espacement entre 2 TextButton utiliser tapTargetSize définir tapTargetSize à MaterialTapTargetSize.shrinkWrap

A supprimer le rembourrage set padding à EdgeInsets.all(0)

TextButton(
    child: SizedBox(),
    style: TextButton.styleFrom(
        backgroundColor: Colors.red,
        padding: EdgeInsets.all(0),
        tapTargetSize: MaterialTapTargetSize.shrinkWrap
    ),
    onPressed: () {
    print('Button pressed')
    },
),

Answer 3

Vous pouvez également modifier la largeur du bouton en l'entourant d'une boîte de taille différente :

SizedBox(
  width: 40,
  height: 40,
  child: RaisedButton(
    elevation: 10,
    onPressed: () {},
    padding: EdgeInsets.all(0), // make the padding 0 so the child wont be dragged right by the default padding
    child: Container(
      child: Icon(Icons.menu),
    ),
  ),
),

Answer 4

Comme FlatButton est maintenant déprécié, vous pouvez utiliser TextButton. Ainsi, si vous souhaitez supprimer le rembourrage du TextButton, vous devez procéder comme suit :

TextButton( style: ButtonStyle(padding: MaterialStateProperty.all(EdgeInsets.zero))

Answer 5

Enveloppez votre FlatButton dans un conteneur et donnez-lui une largeur personnalisée. par exemple.

Container(
            width: 50,
            child: FlatButton(child: Text("WORK",style: Theme.of(context).textTheme.bodyText1.copyWith(fontWeight: FontWeight.bold),),
            onPressed: () => Navigator.pushNamed(context, '/locationChange'),materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,padding: EdgeInsets.all(0),),
          )