How to disable ripple/splash effect in NavigationRail destination icons?

Viewed 638

The stuff I tried:

  1. Wrapping the entire NavigationRail widget with Theme widget and passing in ThemeData where splashColor, highlightColor, hoverColor, hintColor all were set to Colors.transparent.

Although this does seem to take away the initial "splash", but the "ripple" effect is still prevalent (specially onLongPress).

       Theme(
            data : ThemeData(
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent
            ),
            child: NavigationRail(
              selectedIndex: _selectedIndex,
              onDestinationSelected: (int index) {
                setState(() {
                  _selectedIndex = index;
                });
              },
              labelType: NavigationRailLabelType.selected,
              destinations: [
                NavigationRailDestination(
                  icon: Icon(Icons.favorite_border),
                  selectedIcon: Icon(Icons.favorite),
                  label: Text('First'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.bookmark_border),
                  selectedIcon: Icon(Icons.book),
                  label: Text('Second'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.star_border),
                  selectedIcon: Icon(Icons.star),
                  label: Text('Third'),
                ),
              ],
            ),
          )
  1. Wrapping NavigationRail with Semantics and setting excludeSemantics as true or just wrapping it within ExcludeSemantics widget

PS: I don't want to override the entire ThemeData from MaterialApp root although I don't see anything in NavigationRailThemeData class that references this property

PPS: There is a class derived from ColorScheme class in NavigationRail.dart file (towards the end) that takes in a Semantics widget which has all of the properties that need to be disabled, namely the InkResponse widget that defines the color, shape and radius of the splash/ripple NavigationRail.dart

Here is the sample code that flutter.dev provides for copy/paste convenience (works very well in dartpad.dev)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          Theme(
            data : ThemeData(
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent
            ),
            child: NavigationRail(
              selectedIndex: _selectedIndex,
              onDestinationSelected: (int index) {
                setState(() {
                  _selectedIndex = index;
                });
              },
              labelType: NavigationRailLabelType.selected,
              destinations: [
                NavigationRailDestination(
                  icon: Icon(Icons.favorite_border),
                  selectedIcon: Icon(Icons.favorite),
                  label: Text('First'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.bookmark_border),
                  selectedIcon: Icon(Icons.book),
                  label: Text('Second'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.star_border),
                  selectedIcon: Icon(Icons.star),
                  label: Text('Third'),
                ),
              ],
            ),
          ),
          VerticalDivider(thickness: 1, width: 1),
          // This is the main content.
          Expanded(
            child: Center(
              child: Text('selectedIndex: $_selectedIndex'),
            ),
          )
        ],
      ),
    );
  }
}
3 Answers

This worked for me:

Theme(
  data: ThemeData(
     highlightColor: Colors.transparent,
     splashFactory: NoSplash.splashFactory,
  ),
  child: NavigationRail(...)

Just add splashFactory: NoSplash.splashFactory to your theme data.

this works for me:

Theme(
  data: ThemeData(
    highlightColor: Colors.transparent,
    colorScheme: ColorScheme.light(primary: navigationRailColor)
  ),
  child: NavigationRail(...)

where navigationRailColor is background color of your navigation rail

Related