Flutter TextButton splashColor property

user_3808307 0
Viewed 15083

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

flutter-web flutter-layout flutter
6 Answers

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

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

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

user_77583180

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
      }
      ...
    }),
  )
)
user_177928230

You can define your desired color somewhere like inside constants.dart like so:

const kPrimaryColor = Color(0xfffbba3d);

Then you can use ButtonStyle with opacity/transparency using .withOpacity() like so:

TextButton(
     style: ButtonStyle(
          overlayColor: MaterialStateColor.resolveWith(
            (states) => kPrimaryColor.withOpacity(0.3))),
                    onPressed: () => {},
                    child: 
                        Text(
                          'My Button',
                          style: TextStyle(
                              fontSize: 16,
                              color: kPrimaryColor,
                              fontWeight: FontWeight.w400),
                        ),    
                  ),
user_36465620

There is an alternative to using resolveWith and providing an anonymous function like this:

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

Instead, you can just use the named constructor all of MaterialStateProperty, which is syntactic sugar for the same effect:

ButtonStyle(
   overlayColor: MaterialStateProperty.all(Colors.red)
)

This is cleaner and has a better readability.

user_21023280
Related