Flutter TextButton splashColor property

I was using `FlatButton` and passed the properties

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

The [documentation says that FlatButton will become obsolete][1], 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

[1]:

[To see links please register here]

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

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

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*

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

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

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.

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!

*Using theme, it will be applied to all TextButtons in your project*

Put this inside themeData:

textButtonTheme: TextButtonThemeData(
style: ButtonStyle(
splashFactory: NoSplash.splashFactory,
overlayColor: MaterialStateProperty.all(Colors.transparent),
),
),

Using just `copyWith` :


TextButton(
style: TextButton.styleFrom(
primary: Colors.red,
backgroundColor: Colors.transparent,
).copyWith(
overlayColor: MaterialStateProperty.all(Colors.transparent)),
)