Flutter TextButton splashColor property

Question

I was using FlatButton and passed the properties

FlatButton(
      splashColor: Colors.transparent,
      highlightColor: Colors.transparent,
      child: ..., 
)

The documentation says that FlatButton will become obsolete, and to use TextButton instead, but it does not take splashColor or highlightColor properties

TextButton(                  
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
    child: ...,       
)

does not work. it is not allowed

I also tried like this

TextButton(            
  style: ButtonStyle(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
  ),
  child: ..., 
)

How can I do this? Thank you

Answer 1

Colors.transparent will deny any effects, simply it is transparent so it will appear as nothing happens... in ButtonStyle, it goes something like this with colors.

ButtonStyle(
   overlayColor: MaterialStateColor.resolveWith((states) => Colors.red),
),

Answer 2

As Flat button is depricated, you have to use TextButton instead of it, but in text button there is no direct property to change splash color. So if you want to change splash color to transparent you can do it like this.

TextButton(
  style: ButtonStyle(
    overlayColor: MaterialStateProperty.all(Colors.transparent),
  ),
)

Answer 3

You can also use like this

 TextButton( onPressed: () {},
                style: TextButton.styleFrom(
                              backgroundColor: AppColors.primaryColor,
                              primary: Colors.black12),//ripple color
                          child:Text(AppLocalizations.of(context).startAdventure,
                          ));

You can Set primary color to create ripple color

Answer 4

For someone who is not familiar to MaterialStateProperty setting in TextButton (use resolveWith to customize the button effect):

TextButton(
  style: ButtonStyle(
    overlayColor: MaterialStateColor.resolveWith((states) {
      if(states.contains(MaterialState.hover){
        return Colors.transparent; // <- hover color
      }else if(states.contains(MaterialState.pressed){
        return Colors.transparent; // <- ripple color
      }
      ...
    },
    backgroundColor: MaterialStateColor.resolveWith((states) {
      if(states.contains(MaterialState.pressed){
        return Colors.transparent; // <- clicked color
      }
      ...
    }),
  )
)

Answer 5

For Flutter over 3.1.0, where primary is deprecated, I change the spash color using:

style: TextButton.styleFrom(
   backgroundColor: Colors.green,  // Button color
   foregroundColor: Colors.lime,   // Splash color
),
child:Text(...)

In case it helps!