Flutter Pro Design

Small details that build taste in Flutter.

curated by Kamran BekirovKamran Bekirov

Newsletter? Nah, I hate them.

Follow me on and catch new details.

Disable Material tap effects

Material widgets come with ripple, highlight, and overlay effects on taps by default. If you have a custom design language, you might not want to mix with them.

Setting splashFactory: NoSplash.splashFactory on ThemeData disables the ripple globally. The global properties alone cover every widget that uses Flutter's default ink: InkWell, ListTile, Chip, BottomNavigationBar, NavigationRail, NavigationDrawer, and PopupMenuButton.

But that's only the ripple. M3 widgets also show an overlay color on press, hover, and focus, and that comes from their own component theme through overlayColor. Setting global splash properties doesn't touch it.

Paste this into your ThemeData. If a property errors because you already set it, just move your value inside the one here.

final ButtonStyle noSplash = ButtonStyle(
  overlayColor: WidgetStateProperty.all(
    Colors.transparent,
  ),
  splashFactory: NoSplash.splashFactory,
);
  
ThemeData(
  // Disable global ripple/highlight
  splashColor: Colors.transparent,
  splashFactory: NoSplash.splashFactory,
  highlightColor: Colors.transparent,
  hoverColor: Colors.transparent,
  focusColor: Colors.transparent,
  
  // Disable each widget's own tap effect.
  iconButtonTheme: IconButtonThemeData(
    style: noSplash,
  ),
  
  floatingActionButtonTheme: FloatingActionButtonThemeData(
    splashColor: Colors.transparent,
  ),
  textButtonTheme: TextButtonThemeData(
    style: noSplash,
  ),
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: noSplash,
  ),
  outlinedButtonTheme: OutlinedButtonThemeData(
    style: noSplash,
  ),
  filledButtonTheme: FilledButtonThemeData(
    style: noSplash,
  ),
  
  navigationBarTheme: NavigationBarThemeData(
    overlayColor: WidgetStateProperty.all(
      Colors.transparent,
    ),
  ),
  tabBarTheme: TabBarThemeData(
    overlayColor: WidgetStateProperty.all(
      Colors.transparent,
    ),
    splashFactory: NoSplash.splashFactory,
  ),
  
  checkboxTheme: CheckboxThemeData(
    overlayColor: WidgetStateProperty.all(
      Colors.transparent,
    ),
    splashRadius: 0,
  ),
  radioTheme: RadioThemeData(
    overlayColor: WidgetStateProperty.all(
      Colors.transparent,
    ),
    splashRadius: 0,
  ),
  switchTheme: SwitchThemeData(
    overlayColor: WidgetStateProperty.all(
      Colors.transparent,
    ),
  ),
  sliderTheme: SliderThemeData(
    overlayColor: Colors.transparent,
    overlayShape: SliderComponentShape.noOverlay,
  ),
  
  menuButtonTheme: MenuButtonThemeData(
    style: noSplash,
  ),
  segmentedButtonTheme: SegmentedButtonThemeData(
    style: noSplash,
  ),
  toggleButtonsTheme: ToggleButtonsThemeData(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
  ),
  searchBarTheme: SearchBarThemeData(
    overlayColor: WidgetStateProperty.all(
      Colors.transparent,
    ),
  ),
)