La documentation de OutlineButton indique que la propriété color remplit la couleur du bouton et est transparente par défaut. Plus précisément, la documentation Flutter dit à propos de la propriété color: "color â † 'Color Couleur de remplissage du bouton, affichée par son matériau, alors qu'il est dans son état par défaut (non enfoncé, activé)."
Mais la définition de la propriété color n'a aucun effet:
OutlineButton(
color: Colors.orange,
textColor: BmsColors.primaryForegroundColor,
borderSide: BorderSide(color: BmsColors.primaryForegroundColor, width: 2.0),
shape: new RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(8.0),
),
child: Text(
this.text,
style: TextStyle(fontFamily: 'Lalezar', fontWeight: FontWeight.w400),
),
onPressed: () {},
);
3 Réponses :
Si vous vérifiez le code source de OutlineButton il existe une méthode pour obtenir le fillColor
MyCustomOutlineButton(
text: "Become a Member",
color: Colors.orange,
onPressed: () {
print("here");
},
),
Mais cette méthode a une condition if , elle utilise la color uniquement lorsque la highlightElevation est différente de 0 , et elle utilise également l'animation du colorTween de color.withAlpha(0x00) à color.withAlpha(0xFF) .
Ainsi, il passe de transparent à votre couleur lorsque vous appuyez dessus.
Vous pouvez créer votre propre widget OutlineButton si vous le souhaitez, OutlineButton un exemple que j'ai créé:
class MyCustomOutlineButton extends StatelessWidget {
final String text;
final VoidCallback onPressed;
final Color color;
const MyCustomOutlineButton({Key key, this.text, this.onPressed, this.color})
: super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.yellow, width: 2.0),
color: color,
borderRadius: BorderRadius.circular(8.0),
),
margin: EdgeInsets.all(2.0),
child: RawMaterialButton(
fillColor: color,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 14.0),
child: Text(
text,
style: TextStyle(
fontFamily: 'Lalezar',
fontWeight: FontWeight.w400,
color: Colors.yellow),
),
),
onPressed: onPressed,
),
);
}
}
Usage
Color _getFillColor() {
if (widget.highlightElevation == null || widget.highlightElevation == 0.0)
return Colors.transparent;
final Color color = widget.color ?? Theme.of(context).canvasColor;
final Tween<Color> colorTween = ColorTween(
begin: color.withAlpha(0x00),
end: color.withAlpha(0xFF),
);
return colorTween.evaluate(_fillAnimation);
}
Une réponse de code tellement cohérente, utile et bien écrite que j'ai commencé à vous suivre sur Medium et Twitter :). Je suis moi-même très enthousiasmé par Flutter et je pense vraiment que cela pourrait changer la donne dans l'industrie.
Pourquoi avez-vous marqué votre constructeur pour MyCustomOutlineButton const au fait?
@BrianOgden Il a été généré par l'IDE (VSCode), mais c'est une bonne pratique d'utiliser const quand vous le pouvez, spécialement dans les constructeurs
Pour ce que vous voulez, vous pouvez utiliser un simple RaisedButton combiné avec un RoundedRectangleBorder . Voir par exemple:
Container(
color: Colors.pink,
child: RaisedButton(
color: Colors.black,
child: Text('Become a member', style: TextStyle(color: Colors.yellow)),
onPressed: () {
print('Hello');
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: BorderSide(color: Colors.yellow, width: 5.0)),
),
)
La couleur de la bordure peut être spécifiée avec BorderSide et la couleur remplie est simplement la propriété de couleur normale de RaisedButton.
J'espère que cette aide.
OutlineButton est obsolète et a été remplacé par OutlinedButton . (Remarquez le "d".)
OutlinedButton de documentation m'a aidé à comprendre comment l'utiliser. Voici un exemple avec ces états: Désactivé (Gris) -> Normal (Bleu) -> Enfoncé (Rouge)
return Container(
width: double.infinity,
height: 48,
child: OutlinedButton(
child: Text(
"This is an Outline\"d\"Button. (Not OutlineButton)",
style: TextStyle(color: Colors.white),
),
onPressed: () => print("Tapped"),
//onPressed: null, //Uncomment this statement to check disabled state.
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith<Color>((states) {
if (states.contains(MaterialState.disabled)) {
return Colors.grey[100];
}
return Colors.blue;
}),
overlayColor: MaterialStateProperty.resolveWith<Color>((states) {
if (states.contains(MaterialState.pressed)) {
return Colors.red;
}
return Colors.transparent;
}),
side: MaterialStateProperty.resolveWith((states) {
Color _borderColor;
if (states.contains(MaterialState.disabled)) {
_borderColor = Colors.greenAccent;
} else if (states.contains(MaterialState.pressed)) {
_borderColor = Colors.yellow;
} else {
_borderColor = Colors.pinkAccent;
}
return BorderSide(color: _borderColor, width: 5);
}),
shape: MaterialStateProperty.resolveWith<OutlinedBorder>((_) {
return RoundedRectangleBorder(borderRadius: BorderRadius.circular(16));
}),
),
),
);
Flutter a remplacé les 3 anciens types de boutons ( FlatButton , RaisedButton et OutlineButton ) par de nouveaux types de boutons ( TextButton , ElevatedButton et OutlinedButton ) pour rester synchronisés avec la conception de Material et aussi parce que l'utilisation de MaterialStateProperty offre la flexibilité ultime pour obtenir une interface utilisateur spécifique à l'état Besoins. Vous pouvez en savoir plus ici .
Mais il sera rempli de
color: Colors.orangeorangecolor: Colors.orangeuniquement lorsqu'il est pressé. Sinon, sera transparent. Si vous voulez un bouton rempli, vous pouvez essayer avec RaisedButton. Qu'essayez-vous de réaliser exactement?Salut @Hosar, je veux une bordure dorée comme dans la capture d'écran et une couleur de remplissage noire
@Hosar, la documentation Flutter dit, "couleur → Couleur Couleur de remplissage du bouton, affichée par son matériau, alors qu'il est dans son état par défaut (non enfoncé, activé)." Donc je crois que vous vous trompez Hosar, ce n'est pas seulement lorsque vous appuyez dessus
Vous pouvez le faire avec un RaisedButton combiné avec un RoundedRectangleBorder , voir ma réponse.