Question 167801 in Flutter Question posted in
The official Flutter documentation can be found here.

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 ?

Tags:

3

Answers


  1. 0

    Add shadowColor

    style: ElevatedButton.styleFrom(
  backgroundColor: Colors.transparent,
  shadowColor: Colors.transparent,
),
    Login or Signup to reply.
  2. 0

    it’s shadowColor

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

    its work for me below is the code and screenshot

     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,
               shadowColor: Colors.transparent,                                                     
            ),
            onPressed: () {},
            child: const Text(
              'S'inscrire',
            )),
      )

    output

    Login or Signup to reply.
  3. 0

    I know this might not be the best solution but you can try with this

    style: ElevatedButton.styleFrom(
backgroundColor: Colors.white.withOpacity(0),
shadowColor: Colors.white.withOpacity(0), ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search