'How to make Elevated Button with Gradient background?

I am trying to create an Elevated button with gradient background, But it provides some parameters that do not fit it well, and May you know that after Flutter 2.0 version most of the Button classes have been deprecated such as Raised Button, Flat Button, ... etc

ElevatedButton(
child: Text('Woolha.com'),
style: ElevatedButton.styleFrom(
  primary: Colors.teal,
  onPrimary: Colors.white,
  onSurface: Colors.grey,
),
onPressed: () {
  print('Pressed');
},
)

Is there anyway to create ElevatedButton with gradient background?

flutter flutter-layout

Solution 1:^[1]

import 'package:flutter/material.dart';

class RoundedButtonWidget extends StatelessWidget {
  final String buttonText;
  final double width;
  final Function onpressed;

  RoundedButtonWidget({
    required this.buttonText,
    required this.width,
    required this.onpressed,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Container(
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
                color: Colors.black26, offset: Offset(0, 4), blurRadius: 5.0)
          ],
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            stops: [0.0, 1.0],
            colors: [
              Colors.deepPurple.shade400,
              Colors.deepPurple.shade200,
            ],
          ),
          color: Colors.deepPurple.shade300,
          borderRadius: BorderRadius.circular(20),
        ),
        child: ElevatedButton(
          style: ButtonStyle(
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
              ),
              minimumSize: MaterialStateProperty.all(Size(width, 50)),
              backgroundColor:
                  MaterialStateProperty.all(Colors.transparent),
              // elevation: MaterialStateProperty.all(3),
              shadowColor:
                  MaterialStateProperty.all(Colors.transparent),
                  ),
          onPressed: () {
            onpressed();
          },
          child: Padding(
            padding: const EdgeInsets.only(
              top: 10,
              bottom: 10,
            ),
            child: Text(
              buttonText,
              style: TextStyle(
                fontSize: 18,
                // fontWeight: FontWeight.w700,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Solution 2:^[2]

Screenshot (Null safe)

Create this class (highly customized)

class MyElevatedButton extends StatelessWidget {
  final BorderRadiusGeometry? borderRadius;
  final double? width;
  final double height;
  final Gradient gradient;
  final VoidCallback? onPressed;
  final Widget child;

  const MyElevatedButton({
    Key? key,
    required this.onPressed,
    required this.child,
    this.borderRadius,
    this.width,
    this.height = 44.0,
    this.gradient = const LinearGradient(colors: [Colors.cyan, Colors.indigo]),
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final borderRadius = this.borderRadius ?? BorderRadius.circular(0);
    return Container(
      width: width,
      height: height,
      decoration: BoxDecoration(
        gradient: gradient,
        borderRadius: borderRadius,
      ),
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          primary: Colors.transparent,
          shadowColor: Colors.transparent,
          shape: RoundedRectangleBorder(borderRadius: borderRadius),
        ),
        child: child,
      ),
    );
  }
}

Usage:

Use it like a regular ElevatedButton:

MyElevatedButton(
  width: double.infinity,
  onPressed: () {},
  borderRadius: BorderRadius.circular(20),
  child: Text('SIGN IN'),
)

Solution 3:^[3]

Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6.0),
                  gradient: LinearGradient(
                    begin: Alignment(-0.95, 0.0),
                    end: Alignment(1.0, 0.0),
                    colors: [const Color(0xff667eea), const Color(0xff64b6ff)],
                    stops: [0.0, 1.0],
                  ),
                ),
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(primary: Colors.transparent,
                      onSurface: Colors.transparent,
                      shadowColor: Colors.transparent,),

                  onPressed: (){},

                  child: Center(
                    child: Text(
                      'Log in',
                      style: TextStyle(
                        fontFamily: textFontFamilySegoeUI,
                        fontSize: 16,
                        color: const Color(0xffffffff),
                        letterSpacing: -0.3858822937011719,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ),

Solution 4:^[4]

Container(
                    width: 1120.w,
                    height: 180.h,
                    margin: EdgeInsets.fromLTRB(0, 10, 0, 10),
                    decoration: BoxDecoration(
                        gradient: LinearGradient(
                            colors: [Color(0xFF0379C6), Color(0xFF1298EF)]),
                        
                        borderRadius: BorderRadius.circular(25.r),
                        boxShadow: <BoxShadow>[
                          BoxShadow(
                              color: Color.fromRGBO(16, 142, 233, 0.57),
                              blurRadius: 13)
                        ]),
                    child: ElevatedButton(
                      style: ButtonStyle(
                        backgroundColor: MaterialStateProperty.all(
                            Colors.transparent), 
                      ),
                      onPressed: () => setState(() {
                        // _launched = _makePhoneCall('tel:$_phone');
                      }),
                      child: Text(
                        'Submit',
                        style:
                            TextStyle(color: Colors.white, fontSize: 64.sp),
                      ),
                    ),
                  )

Solution 5:^[5]

botao

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: const Text('Priscila Dev'),
  ),
  body: Center(
      child: Container(
    width: 300,
    height: 100,
    decoration: const ShapeDecoration(
      shape: StadiumBorder(),
      gradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [Colors.blue, Colors.orange, Colors.green],
      ),
    ),
    child: MaterialButton(
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      shape: const StadiumBorder(),
      child: const Text(
        'ENCERRAR[enter image description here][1]',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
      onPressed: () {
        print('Hello!');
      },
    ),
  )),
);

}

Solution 6:^[6]

Try this

Container(
                            padding: EdgeInsets.fromLTRB(
                                10.0,
                                6.0,
                                10.0,
                                6.0),
                            decoration: BoxDecoration(
                                gradient: LinearGradient(
                        colors: [Color(0xff3b8594)), Color(0xff59a6b6)]),
                                borderRadius:
                                BorderRadius.circular(25.0)),
                            child: Text(
                              'View more',
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 16.0),
                            ),
                          )

Result

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Suraj Rao
Solution 4	Mingjia Li
Solution 5
Solution 6	Quick learner

'How to make Elevated Button with Gradient background?

Solution 1:[1]

Solution 2:[2]

Screenshot (Null safe)

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]