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'),
),
Related videos on Youtube
Author by
Chaythanya Nair
Updated on July 09, 2022Comments
-
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 over 5 yearsmaybe you just want to set
hightlightColor
toColors.transparent
too.
-
-
jumpfightgo almost 5 yearshighlightColor 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 almost 2 yearsThis does not change anything on my button as far as I can tell, highlight is still shown.