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

score 51 · Accepted Answer · answered Oct 15 '20 at 23:28

51

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

answered Oct 15 '20 at 23:28

dGoran

803
8
8

Yes, I want transparent, this is a web project and I don't want the bubbles when you click. In this example I can't replace overlayColor with splashColor but it seems it removed the effect. Why do I have to use MaterialStateColor with this TextButton instead of just Color? What does it mean? – user3808307 Oct 15 '20 at 23:45

score 23 · Answer 2 · answered Mar 05 '21 at 04:47

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

Balaji · Answer 3 · 2021-03-20T08:11:24.510

14

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

edited Mar 20 '21 at 08:11

answered Mar 20 '21 at 07:31

Balaji

1,773
1
17
30

No, the primary property on a TextButton sets the colour of its text (and icon, if its TextButton.icon). It does not change the ripple color. – Marvioso Mar 30 '21 at 16:12
2

I have been using this in my project, It seems working fine actually! @Marvioso Have you tested my code? – Balaji Apr 26 '21 at 13:03
Hey, I've just re-tested the code and it works actually! The primary colour sets the colour of the text, but it also sets a very faint (low opacity) colour to the ripple animation. If you wanted a different text colour than the set primary colour, you can set this in the textstyle property. Good catch Balaji – Marvioso Apr 27 '21 at 22:45

score 6 · Answer 4 · answered Oct 05 '22 at 15:10

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!

score 5 · Answer 5 · answered Dec 26 '22 at 14:37

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

score 4 · Answer 6 · edited Feb 22 '22 at 06:29

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

score 3 · Answer 7 · answered Mar 16 '23 at 10:28

Using just copyWith :

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

score 2 · Answer 8 · answered Jul 20 '21 at 17:30

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

Ahmed Raafat · Answer 9 · 2023-07-19T23:32:30.107

1

To remove splash Make backgroundColor same foregroundColor

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

edited Jul 19 '23 at 23:32

answered Jun 11 '23 at 22:27

Ahmed Raafat

162
4
6

score 0 · Answer 10 · answered Jul 07 '22 at 09:34

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.

Flutter TextButton splashColor property

10 Answers10

Linked