How to disable splash highlight of FlatButton in Flutter?

24,590

Solution 1

I'd expect an invisible highlight color to do what you want:

new FlatButton({
  ...
  splashColor: Colors.transparent,  
  highlightColor: Colors.transparent, // makes highlight invisible too
})

Solution 2

since flatbuton is depreciated and for the new textButton we have something like this.

TextButton(
   style: ButtonStyle(
   overlayColor: MaterialStateProperty.resolveWith<Color>(
  (Set<MaterialState> states) {
    if (states.contains(MaterialState.focused))
      return Colors.red;
    if (states.contains(MaterialState.hovered))
        return Colors.green;
    if (states.contains(MaterialState.pressed))
        return Colors.blue;
    return null; // Defer to the widget's default.
}),
),
 onPressed: () { },
 child: Text('TextButton with custom overlay colors'),
)

Solution 3

FlatButton was deprecated in Flutter v1.26 (https://api.flutter.dev/flutter/material/FlatButton-class.html).

Use TextButton and the overlayColor property.

TextButton(
  style: ButtonStyle(
    overlayColor: MaterialStateProperty.all(Colors.transparent)
  )
)

Solution 4

December 2021:

Per flutter/lib/src/material/button_style.dart line 247, the correct way to do this is:

style: TextButton.styleFrom(
  splashFactory: NoSplash.splashFactory,
),
/// Use [NoSplash.splashFactory] to defeat ink splash rendering. For example:
ElevatedButton(
  style: ElevatedButton.styleFrom(
    splashFactory: NoSplash.splashFactory,
  ),
  onPressed: () { },
  child: Text('No Splash'),
),
Share:
24,590

Related videos on Youtube

Chaythanya Nair
Author by

Chaythanya Nair

Updated on July 09, 2022

Comments

  • Chaythanya Nair
    Chaythanya Nair over 1 year

    I have a FlatButton. I don't want the splash highlight when the button is clicked. I tried changing the splash colour to transparent, but that didn't work. Here is the code for my FlatButton.

    Widget button = new Container(
      child: new Container(
        padding: new EdgeInsets.only(bottom: 20.0),
        alignment: Alignment.center,
        child: new FlatButton(
          onPressed: () {
            _onClickSignInButton();
          },
          splashColor: Colors.transparent,
          child: new Stack(
            alignment: Alignment.center,
            children: <Widget>[
              new Image.asset('images/1.0x/button1.png',
              ),
              new Text("SIGN IN",
                style: new TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 16.0
                  ),
              )
            ],
          ),
        ),
      ),
    );
    
    • Rémi Rousselet
      Rémi Rousselet over 5 years
      maybe you just want to set hightlightColor to Colors.transparent too.
  • jumpfightgo
    jumpfightgo almost 5 years
    highlightColor is actually the parameter that was missing from the OP's shared code... I also suggested editing the code snippet to make it clear that (invisible) is a comment not part of the code and that commas are necessary
  • masus04
    masus04 almost 2 years
    This does not change anything on my button as far as I can tell, highlight is still shown.