1

I am working on an ElevatedButton style in Flutter and I try to make it perfectly white inside with some elevation, but I can't achieve it. Here is my style:

ButtonStyle(
elevation: MaterialStateProperty.all(5), 
backgroundColor: MaterialStateProperty.all(
    Colors.white), 
)

But when I try to actually use it the button isn't white, but a little bit darker.

enter image description here

Also when I try any other color with elevation the same thing happens and the colors aren't perfectly adequate.

I found out there is a thing called surfaceTintColor which seems to change the exact color of a button.

SpeeDfire12
  • 57
  • 7

1 Answers1

2

Result:

enter image description here

You can play around with the ButtonStyle/elevation:

 ElevatedButton(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all<Color>(Colors.white),
              foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
              overlayColor: MaterialStateProperty.all<Color>(Colors.white),
              shadowColor: MaterialStateProperty.all<Color>(Colors.white),
              elevation: MaterialStateProperty.all<double>(0.1),
            ),
            child: Text(
              'Elevated Button',
              style: TextStyle(color: Colors.black),
            ),
            onPressed: () {},
          )
MendelG
  • 14,885
  • 4
  • 25
  • 52
  • It seems to work just fine, but I also tried to use the thing called surfaceTintColor with the same color I use for backgroundColor and it also seems to do the job. – SpeeDfire12 Aug 13 '23 at 17:15