Search code examples
flutterdartuser-interfacecolorsgradient

Colors.transparent opacity make background color darker - Flutter

I want to set a gradient as a background color for my ElevatedButton.

So I did this :

Container(
            height: 100,
            width: 100,
            decoration: const BoxDecoration(
                gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              colors: [
                Color(0xFFFE1871),
                Color(0xFFFD0E38),
                Color(0xFFFF0205),
              ],
            )),
            child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.transparent),
                onPressed: () {},
                child: const Text(
                  'S\'inscrire',
                )),
          ),

But the gradient's colors are darker than expected.

Here's what I want :

preview wanted

Here's what I have :

preview obtained

It seems like there is some default opacity with Colors.transparent.

How to fix it ?

Solution

  • Add shadowColor

    style: ElevatedButton.styleFrom(
  backgroundColor: Colors.transparent,
  shadowColor: Colors.transparent,
),