Flutter – IconButton Remove Splash
The IconButton class represents a material design icon button. IconButton is a picture printed on a material widget that reacts to touches by filling with color. The flutter developers commonly used the Icon buttons in the AppBar actions field, but IconButtons can also be used in many other places. The flutter app developers can leave the onPressed callback null to disable an IconButton, it will not react to touch.
The following flutter app development tutorial will demonstrate how to remove the splash from an IconButton widget. In this example code, we used the IconButon class’s splashColor property to remove the splash effect of an InconButton widget. Here we also change the icon button’s highlight color by using the IconButton class’s highlightColor property.
The IconButton class’s splashColor property value is a Color that defines the primary color of the button when the button is in the down/pressed state. The splash is represented as a circular overlay that appears above the highlightColor overlay. The splash overlay center point is the hit point of the user touch event in IconButton. The splash overlay expands to fill the button area when users held the touch for a long enough time.
When flutter developers set the splash color transparency, the highlight and button color will show through. So, here we set the InconButton’s splashColor property value to a fully transparent color to remove the splash color from an IconButton. Now we have to hide the highlight color to altogether remove the splash effect from an IconButton instance.
The IconButton class’s highlightColor property value is also a Color object that defines the secondary color of the button when the button is in the down/pressed state. The IconButton highlight color is represented as a solid color that is overlaid over the button color if any. When flutter developers set transparency to the highlight color then the button color will show through. In this example, we set a fully transparent color for the IconButton’s highlightColor property value.
So finally, the flutter app developers can remove the splash effect from an IconButton widget by setting a fully transparent color to the both splashColor and highlightColor properties.
main.dart
import 'package:flutter/material.dart';
void main(){
runApp(
MaterialApp(
theme: ThemeData(primarySwatch: Colors.grey),
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter - IconButton Remove Splash")
),
body: Center(
child: IconButton(
iconSize: 96,
icon: const Icon(Icons.shopping_cart),
onPressed: (){},
color: Colors.green.shade700,
splashColor: Colors.transparent,
highlightColor: Colors.transparent
)
)
),
),
);
}
More flutter tutorials
- flutter – How to change ElevatedButton border radius
- flutter – How to create circular ElevatedButton
- flutter – How to change ElevatedButton shape
- flutter – How to remove padding from ElevatedButton
- flutter – TextButton splash color
- flutter – How to set TextButton width
- flutter – TextButton style
- flutter – How to change TextButton color
- flutter – TextButton onPressed
- flutter – OutlinedButton style
- flutter – OutlinedButton color
- flutter – OutlinedButton height
- flutter – How to change IconButton size
- flutter – How to remove IconButton padding
- flutter – How to disable an IconButton
Flutter Tutorials 