Comment définir la couleur d'arrière-plan d'un Flutter OutlineButton?

Voici comment vous pouvez vérifier la couleur d'arrière-plan du bouton. Supprimez hightlightColor et essayez de donner une valeur à la propriété highlightElevation de OutlineButton, puis appuyez dessus, vous pouvez voir initialement qu'il charge la couleur orange.

Vous pouvez utiliser FlatButton et y définir simplement la couleur.

Pour modifier la couleur d' arrière-plan d'un OutlineButton, vous pouvez utiliser un DecoratedBox et un widget Thème . À la fin de cette réponse, vous trouverez un exemple rapide.

Quoi qu'il en soit, je recommanderais toujours d' utiliser simplement le FlatButton avec son attribut de color place.

Enveloppez votre OutlinedButton dans une DecoratedBox . Définissez la shape de votre DecoratedBox sur la même forme que votre OutlinedButton . Vous pouvez maintenant utiliser l'attribut de color de votre DecoratedBox pour changer la couleur. Le résultat aura toujours un petit remplissage autour du OutlinedButton . Pour supprimer cela, vous pouvez envelopper le DecoratedBox dans un Theme dans lequel vous ajustez le ButtonTheme . À l'intérieur du ButtonTheme vous souhaitez définir materialTapTargetSize: MaterialTapTargetSize.shrinkWrap .

Le rembourrage est ajouté à l'intérieur de Flutter, pour augmenter la zone de tap autour du bouton à une taille minimale de 48x48 (source) . La définition de materialTapTargetSize sur MaterialTapTargetSize.shrinkWrap supprime cette taille minimale.

Exemple FlatButton :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyButton(),
        ),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration:
          ShapeDecoration(shape: CircleBorder(), color: Colors.pinkAccent),
      child: Theme(
        data: Theme.of(context).copyWith(
            buttonTheme: ButtonTheme.of(context).copyWith(
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap)),
        child: OutlineButton(
          shape: CircleBorder(),
          child: Text('A'),
          onPressed: () => {},
        ),
      ),
    );
  }
}

Exemple OutlinedButton :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: FlatButton(
            color: Colors.pinkAccent,
            shape: CircleBorder(),
            onPressed: () => {},
            child: Text('A'),
          ),
        ),
      ),
    );
  }
}

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 .