CODEWITHSUNDEEP
flutterflutter-layoutlinear-gradients
Karol Wiśniewski
Karol Wiśniewski

Reputation: 508

How to overwrite color of ElevatedButton with LinearGradient?

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

This is how its looking now, below its how it should look This is how its looking without backgroundColor enter image description here

Upvotes: 0

Views: 301

Answers (3)

DiyorbekDev
DiyorbekDev

Reputation: 774

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 -> enter image description here

Upvotes: 1

Meet Patel
Meet Patel

Reputation: 327

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'),
        ),
      ),

Upvotes: 1

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14865

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-> image

Upvotes: 1

Related Questions