Flutter 2.0 - How to change TextButton splash color when pressed?

Question

FlatButton is deprecated and shouldn't be used. Used TextButton instead.

On my previous FlatButton widget, I was able to changed the splash color when on pressed. But now I'm using TextButton widget, how can I change its color the efficient way on the MaterialApp ThemeData or directly on the TextButton widget.

Currenly this is my TextButton

TextButton(
  style: TextButton.styleFrom(
    primary: Colors.red,
    textStyle: TextStyle(
      color: Colors.black45,
      fontFamily: "Courier Prime",
    ),
    backgroundColor: Colors.transparent,
  ),
  onPressed: () {},
  child: Text(
    "Student",
    style: TextStyle(fontWeight: FontWeight.bold),
  ),
),

overlayColor is used to indicate that the button is focused, hovered, or pressed.

But I cant find this overlayColor

@AkshayNayka , its the Splash color what i mean like when you pressed a button theres an accent colors slowly filling up the button. Its not the Button Color. — Raine Dale Holgado, Apr 06 '21 at 08:29

score 9 · Answer 1 · answered Apr 06 '21 at 08:40

First keep in mind that the primary property on a TextButton sets the colour of its text and icon. It does not change the ripple color. Secondly in Textbutton 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.________),
  ),
)

score 6 · Answer 2 · answered Sep 07 '21 at 14:08

6

You can quickly set the splash color of a TextButton using the helper method TextButton.styleFrom(). Note that this will actually set both the foreground color and splash color based on the foreground color, which in most of the cases is what you want:

TextButton(
  style: TextButton.styleFrom(primary: Colors.red),
  child: const Text('Text Button'),
  onPressed: () {},
)

Live Demo

answered Sep 07 '21 at 14:08

NearHuscarl

66,950
18
261
230

Thank bro, this way is faster & shorter than the way use ButtonStyle() like others recommended – Nghien Nghien May 31 '22 at 04:32

score 4 · Accepted Answer · answered Apr 06 '21 at 09:04

4

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

reference to Flutter TextButton splashColor property

answered Apr 06 '21 at 09:04

s.am.i

648
5
16

score 0 · Answer 4 · answered Jun 11 '21 at 08:50

You can change Splash color like this:

            Theme(
              data: ThemeData(
                splashColor: Colors.red,
                highlightColor: Colors.black.withOpacity(.5),
              ),
              child: ListTile(
                  title: Text(
                    "New theme splash",
                    textAlign: TextAlign.center,
                  ),
                  onTap: () {}),
            ),

Flutter 2.0 - How to change TextButton splash color when pressed?

4 Answers4

Live Demo