The stuff I tried:
- Wrapping the entire NavigationRail widget with Theme widget and passing in ThemeData where
splashColor,highlightColor,hoverColor,hintColorall were set toColors.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'),
),
],
),
)
- Wrapping NavigationRail with Semantics and setting
excludeSemanticsastrueor 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'),
),
)
],
),
);
}
}