How to set Gradient Background on ElevetedButton in Flutter

In this example, we are going to show you how to set gradient background on ElevatedButton in Flutter. We will use DecoratedBox() widget to set gradient background. See the example:

Read this also:\u00a0How to Style DropdownButton in Flutter

How to Set Gradient Background on ElevatedButton:

DecoratedBox(
    decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Colors.blueAccent, 
              Colors.redAccent,
              Colors.purpleAccent
              //add more colors
            ]),
          borderRadius: BorderRadius.circular(5),
          boxShadow: <BoxShadow>[
            BoxShadow(
                color: Color.fromRGBO(0, 0, 0, 0.57), //shadow for button
                blurRadius: 5) //blur radius of shadow
          ]
      ),
    child:ElevatedButton(
      style: ElevatedButton.styleFrom(
          primary: Colors.transparent,
          onSurface: Colors.transparent,
          shadowColor: Colors.transparent,
          //make color or elevated button transparent
      ),
      
      onPressed: (){
          print("You pressed Elevated Button");
      }, 
      child: Padding(
        padding:EdgeInsets.only(
          top: 18,
          bottom: 18,
        ),
        child:Text("Press This Button"),
      )
    )  
)

DecoratedBox() widget is used to decorate any kind of widget in Flutter. When we wrap ElevatedButton() with DecoratedBox(), the decoration style will apply below Elevated Button. Therefore, transparent colors need to apply on ElevatedButton().

Full Dart/Flutter Code Example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
         home: Home()
      );
  }
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Gradient Background on ElevatedButton"),
            backgroundColor: Colors.redAccent
         ),
          body: Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(50),
             child: Column(
                children: [ 

                    DecoratedBox(
                        decoration: BoxDecoration(
                             gradient: LinearGradient(
                               colors: [
                                  Colors.blueAccent, 
                                  Colors.redAccent,
                                  Colors.purpleAccent
                                  //add more colors
                                ]),
                              borderRadius: BorderRadius.circular(5),
                              boxShadow: <BoxShadow>[
                                BoxShadow(
                                    color: Color.fromRGBO(0, 0, 0, 0.57), //shadow for button
                                    blurRadius: 5) //blur radius of shadow
                              ]
                         ),
                        child:ElevatedButton(
                          style: ElevatedButton.styleFrom(
                             primary: Colors.transparent,
                             onSurface: Colors.transparent,
                             shadowColor: Colors.transparent,
                             //make color or elevated button transparent
                          ),
                          
                          onPressed: (){
                              print("You pressed Elevated Button");
                          }, 
                          child: Padding(
                            padding:EdgeInsets.only(
                              top: 18,
                              bottom: 18,
                            ),
                            child:Text("Press This Button"),
                          )
                        )  
                    )  
                    
                ]
              )
          )
    );
  } 
}

Output Screenshot:

In this way, you can apply a gradient color background on ElevatedButton() using DecoratedBox(). Apply this code in your project, or create your own gradient button widget using this code so that you can reuse it without long styling codes in Flutter. To apply similar gradients to background cards and containers, explore linear gradient backgrounds on containers and adding icons to elevated buttons.