40
votes

Comment puis-je changer la couleur d'arrière-plan d'un Textbutton dans Flutter?

J'essaie de migrer mon FlatButton vers textButton . Depuis FlatButtons sont obsolètes car j'ai mis à niveau ma version Flutter. Je suis actuellement aux prises avec l'adaptation de la couleur d'arrière-plan.

Old Bouton:

TextButton(
        onPressed: onPressed,
        style: ButtonStyle(backgroundColor: Colors.red), // <-- Does not work
        child: Text(label, style: TextStyle(color: fontColor, fontWeight: boldLabel ? FontWeight.bold : FontWeight.normal)),
      ),

nouveau bouton:

FlatButton(
        height: height,
        onPressed: onPressed,
        shape: baseButtonBorder,
        color: Colors.red,
        child: Text(label, style: TextStyle(color: fontColor, fontWeight: boldLabel ? FontWeight.bold : FontWeight.normal)),
      )`

Le bouton plat n'a pas d'attribut couleur , j'ai donc essayé d'utiliser l'attribut style et d'ajouter un Buttonstyle . Cependant, la Dart dit:

Le type d'argument 'MaterialColor' ne peut pas être affecté au type de paramètre 'MaterialStateProperty '.

Comment peut Je stylise mon textbutton avec la couleur rouge comme je le faisais avec mon flatbutton ? Dois-je créer un MaterialStateProperty avec le rouge?

flutter

0 commentaires

4 Réponses :

2
votes

Essayez de cette façon,

TextButton(
  onPressed: () {},
  child: Container(
    padding: EdgeInsets.fromLTRB(30, 10, 30, 10),
    color: Colors.red,
    child: Text(""),
  ),
)

0 commentaires

70
votes

BackgroundColor La propriété est MaterialStateProperty Type. Vous pouvez vérifier Documentation Flutter .

Vous devez donc utiliser Classe MaterialStateProperty Pour appliquer la couleur. Un exemple rapide:

TextButton(
    child: Text('test'),
    style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.red)),
    onPressed: () {},
),

2 commentaires

Puis-je demander pourquoi je dois utiliser MaterialStateProperty.all ? Pourquoi ne puis-je pas utiliser couleurs.red directement?

Comme le dit la documentation, bacgroundcolor n'est pas colori type, vous ne pouvez donc pas utiliser couleurs.red . Vous pouvez trouver plus de détails sur MaterialStateProperty dans la documentation Flutter: api.flutter.dev/flutter/material/…

26
votes

Pour les personnes à la recherche d'un moyen plus clair et plus facile de le faire, vous pouvez utiliser textButton.styleFrom () . Exemple:

TextButton(
  child: Text('Example'),
  onPressed: () {},
  style: TextButton.styleFrom(backgroundColor: Colors.red),
)

Vous pouvez personnaliser presque tout ce que vous voulez dans StyleFrom. Cela fonctionne également pour d'autres boutons, comme eleatedbutton et suintinébutton .

1 commentaires

Nice, court et simple. Merci!

0
votes

moyen le plus facile d'ajouter un fond de fond à TextButton

TextButton ( Style: textButton.styleFrom (BackgroundColor: Colors.Red), ),

0 commentaires