flutter - Comment créer un bouton en relief avec un fond en dégradé ?

Question

Existe-t-il un moyen de changer la couleur d'arrière-plan du bouton en relief en un dégradé ? Sinon, comment puis-je réaliser quelque chose comme ça ?

Answer 1

Toutes les solutions ci-dessus ne fonctionnent pas vraiment sans quelques artefacts ou problèmes mineurs (par exemple, l'absence d'effet d'ondulation, des bordures indésirables, le non-respect de la charte du thème, etc. minWidth pour les boutons).

Le site La solution ci-dessous ne présente aucun des problèmes ci-dessus (la partie critique est d'utiliser le Ink pour conserver les capacités d'ondulation sur le gradient) :

RaisedButton(
  onPressed: () { },
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(80.0)),
  padding: const EdgeInsets.all(0.0),
  child: Ink(
    decoration: const BoxDecoration(
      gradient: myGradient,
      borderRadius: BorderRadius.all(Radius.circular(80.0)),
    ),
    child: Container(
      constraints: const BoxConstraints(minWidth: 88.0, minHeight: 36.0), // min sizes for Material buttons
      alignment: Alignment.center,
      child: const Text(
        'OK',
        textAlign: TextAlign.center,
      ),
    ),
  ),
)

Answer 2

Vous pouvez créer vous-même un modèle personnalisé

class RaisedGradientButton extends StatelessWidget {
  final Widget child;
  final Gradient gradient;
  final double width;
  final double height;
  final Function onPressed;

  const RaisedGradientButton({
    Key key,
    @required this.child,
    this.gradient,
    this.width = double.infinity,
    this.height = 50.0,
    this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      height: 50.0,
      decoration: BoxDecoration(gradient: gradient, boxShadow: [
        BoxShadow(
          color: Colors.grey[500],
          offset: Offset(0.0, 1.5),
          blurRadius: 1.5,
        ),
      ]),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
            onTap: onPressed,
            child: Center(
              child: child,
            )),
      ),
    );
  }
}

Et utilisez-le partout comme suit :

RaisedGradientButton(
  child: Text(
    'Button',
    style: TextStyle(color: Colors.white),
  ),
  gradient: LinearGradient(
    colors: <Color>[Colors.green, Colors.black],
  ),
  onPressed: (){
    print('button clicked');
  }
),

Vous pouvez encore jouer avec l'ombre et les bords arrondis en modifiant la propriété de décoration du conteneur jusqu'à ce qu'elle corresponde à vos spécifications.

Answer 3

Voir ci-dessous -

RaisedButton(
     onPressed: () {},
     textColor: Colors.white,
     padding: const EdgeInsets.all(0.0),
     shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(80.0)),
     child: Container(
       decoration: const BoxDecoration(
         gradient: LinearGradient(
           colors: <Color>[
             Color(0xFF0D47A1),
             Color(0xFF1976D2),
             Color(0xFF42A5F5),
           ],
         ),
         borderRadius: BorderRadius.all(Radius.circular(80.0))
       ),
       padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
       child: const Text(
           'Gradient Button',
           style: TextStyle(fontSize: 20)
       ),
     ),
   )

Answer 4

Gradient est disponible dans le magasin de pubs et supporte quelques gradients prédéfinis.

Vous pouvez créer le bouton de gradient comme

GradientButton(
                 child: Text('Gradient'),
                 callback: () {},
                 gradient: Gradients.backToFuture,
           ),

Le paquet contient GradientCard, GradientProgressIndicator, GradientButton, CircularGradientButton et GradientText.

Widgets en dégradé

Answer 5

La documentation sur l'API de Flutter contient un exemple de la façon de rendre une RaisedButton avec fond dégradé - voir ici https://api.flutter.dev/flutter/material/RaisedButton-class.html

Widget gradientButton = Container(
  child: RaisedButton(
    onPressed: () { },
    textColor: Colors.white,
    padding: const EdgeInsets.all(0.0),
    child: Container(
      width: 300,
      decoration: new BoxDecoration(
        gradient: new LinearGradient(
          colors: [
            Color.fromARGB(255, 148, 231, 225),
            Color.fromARGB(255, 62, 182, 226)
          ],
        )
      ),
      padding: const EdgeInsets.all(10.0),
      child: Text(
        "Gradient Button",
        textAlign: TextAlign.center,
      ),
    ),
  ),
);