Блог

Материал, который я пробовал:

1. Оборачиваем весь виджет NavigationRail виджетом Theme и передаем в ThemeData, где splashColor , highlightColor , hoverColor , hintColor все были установлены на Colors.transparent .

Хотя это, кажется, устраняет первоначальный «всплеск», но эффект «пульсации» все еще распространен (особенно в 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'),
                ),
              ],
            ),
          )
  

2. Обертывание NavigationRail семантикой и настройка excludeSemantics как true или просто обертывание в виджете ExcludeSemantics

PS: Я не хочу переопределять все тематические данные из корня MaterialApp, хотя я не вижу ничего в классе NavigationRailThemeData, который ссылается на это свойство

PPS: Существует класс, производный от класса ColorScheme в файле NavigationRail.dart (ближе к концу), который использует виджет с семантикой, обладающий всеми свойствами, которые необходимо отключить, а именно виджет InkResponse, который определяет цвет, форму и радиус всплеска / пульсации
NavigationRail.dart

Вот пример кода, который flutter.dev предоставляет для удобства копирования / вставки (очень хорошо работает в 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'),
            ),
          )
        ],
      ),
    );
  }
}
  

У меня это сработало:

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

у меня это работает:

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

где navigationRailColor — это цвет фона вашего навигационного рельса

Просто добавьте splashFactory: NoSplash.splashFactory в свою тему данные.