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

FlatButton(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,)

Answer 2

UPDATE (Nouveaux boutons)

• TextButton

  

  TextButton(
    onPressed: () {},
    style: TextButton.styleFrom(
      minimumSize: Size.zero, // Set this
      padding: EdgeInsets.zero, // and this
    ),
    child: Text('TextButton'),
  )

• ElevatedButton

  

  ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
      minimumSize: Size.zero, // Set this
      padding: EdgeInsets.zero, // and this
    ),
    child: Text('ElevatedButton'),
  )

• OutlinedButton

  

  OutlinedButton(
    onPressed: () {},
    style: OutlinedButton.styleFrom(
      minimumSize: Size.zero, // Set this
      padding: EdgeInsets.zero, // and this
    ),
    child: Text('OutlinedButton'),
  )

---

Vous pouvez également utiliser la version brute MaterialButton

MaterialButton(
  onPressed: () {},
  color: Colors.blue,
  minWidth: 0,
  height: 0,
  padding: EdgeInsets.zero,
  child: Text('Button'),
)

Answer 3

Je trouve plus facile d'envelopper le bouton dans un fichier de type ButtonTheme .

Spécifiez le maxWith et la hauteur (mis à zéro pour envelopper l'enfant) et passez ensuite votre bouton comme enfant.

Vous pouvez également déplacer la plupart des propriétés de vos boutons du bouton vers le thème afin de rassembler toutes les propriétés dans un seul widget.

ButtonTheme(
  padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 8.0), //adds padding inside the button
  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, //limits the touch area to the button area
  minWidth: 0, //wraps child's width
  height: 0, //wraps child's height
  child: RaisedButton(onPressed: (){}, child: Text('Button Text')), //your original button
);

Answer 4

FlatButton(
  padding: EdgeInsets.all(0) 
)

a fait l'affaire pour moi

Answer 5

Avec l'aimable autorisation de FlatButton introduit un rembourrage fantôme sur le git de flutter.

Si quelqu'un a besoin d'un widget avec un événement onPressed sans que Flutter ne le remplisse.

Vous devez utiliser InkWell

InkWell(
    child: Center(child: Container(child: Text("SING UP"))),
    onTap: () => onPressed()
);

Une zone rectangulaire d'un matériau qui réagit au toucher.