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

Berezina

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

Ontogeny

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? – Berezina

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

Douzepers

It seems it works for all types of buttons, including ElevatedButton. Thank you. – Gader

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

Prevenient

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. – Hendel

I have been using this in my project, It seems working fine actually! @Hendel Have you tested my code? – Prevenient

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 – Hendel

Answer 4

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!

Ugric

Answer 5

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

Kindergartner

Answer 6

Using just copyWith :

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

Pancreatin

Answer 7

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

Makkah

Answer 8

To remove splash Make backgroundColor same foregroundColor

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

Standin

Answer 9

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

Virginium

Answer 10

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.

Ostracism