How to add a gradient to a Button in Flutter?

Question

Is there a way to change the ElevatedButton background color to a gradient?

Answer 1

All the solution above are not really working without some minor artifacts or issues (e.g. missing ripple effect, unwanted borders, not respecting the theme's minWidth for buttons).

The solution below has none of the above issues (the critical part is to use the Ink widget to retain the ripple capabilities over the 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

You can create a custom one yourself

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,             )),       ),     );   } } 

And use it anywhere as follows:

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

You can further play around with the shadow and rounded borders by editing the Container's decoration property until it matches your spec.