How to overwrite color of ElevatedButton with LinearGradient?

Question

I am trying to do ElevatedButton with LinearGradient, I am giving it to Container around my button, but it's not affecting it. I tried to set backgroundColor of button to transparent, but it's not looking how it should.

This is my code:

Container(
                margin: EdgeInsets.symmetric(horizontal: size.width * 0.15, vertical: size.height * 0.03),
                decoration: BoxDecoration(
                  gradient: LinearGradient(colors: [Color(0xffFF2973), Color(0xffFF6ABD)]),
                  borderRadius: BorderRadius.circular(10)
                ),
                width: size.width * 0.7,
                height: 45,
                child: ElevatedButton(
                  style: ButtonStyle(
                    shape: MaterialStateProperty.all(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)
                      )
                    ),
                    backgroundColor: MaterialStateProperty.all(Colors.transparent),
                  ),

On left picture this is how its looking now, below its how it should look

On right picture this is how its looking without backgroundColor

Answer 1

Try below code hope its helpful to you.

Container(
   decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    gradient: LinearGradient(
      colors: [
        Colors.pink,
        Colors.red,
        Colors.orange,
      ],
    ),
  ),
  child: ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
      primary: Colors.transparent,
      shadowColor: Colors.transparent,
      minimumSize: Size (50,100),
    ),
    child: Text('Elevated Button'),
  ),
),

Result->

Answer 2

InkWell(
        onTap: () {},
        child: Container(
          margin: EdgeInsets.symmetric(
            horizontal: MediaQuery.of(context).size.width * 0.15,
            vertical: MediaQuery.of(context).size.height * 0.03,
          ),
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                  colors: [
                    Colors.green.withOpacity(0.5),
                    Colors.black.withOpacity(0.5)
                  ]),
              borderRadius: BorderRadius.circular(10)),
          width: MediaQuery.of(context).size.width * 0.7,
          height: 45,
          alignment: Alignment.center,
          child: const Text('Hello Text'),
        ),
      ),

Answer 3

class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _Examplestate();
  }
}

class _Examplestate extends State<Example> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Stateful Widget'),
        ),
        body: Center(
          child: RadiantGradientMask(
            gradient:const LinearGradient(
              colors: [
                Colors.pink,
                Colors.red,
                Colors.orange,
              ],
            ),
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(primary: Colors.white),
              onPressed: () {},
              child: const Text("Hello",style: TextStyle(color: Colors.black),),
            ),
          ),
        ));
  }
}

class RadiantGradientMask extends StatelessWidget {
  const RadiantGradientMask({
    Key? key,
    required this.child,
    required this.gradient,
  }) : super(key: key);
  final Widget child;
  final Gradient gradient;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      shaderCallback: (Rect bounds) {
        return gradient.createShader(bounds);
      },
      child: child,
    );
  }
}

Result ->