Не могу убрать выделение при долгом удерживании кнопки в виджете NavigationRail. Flutter

Question

Мы используем виджет NavigationRail, при нажатии на элемент навигации, мы меняем иконку. При долгом нажатии, появляется серый овал, который нужно убрать. Как это сделать?

Пример кода:

  SizedBox _profileMenuContainer() {
    return SizedBox(
      height: 310,
      child: Padding(
        padding: const EdgeInsets.only(left: 14),
        child: NavigationRail(
          backgroundColor: const Color(0xff070710),
          selectedIndex: _selectedIndex,
          useIndicator: false,
          onDestinationSelected: (int index) {
            setState(() {
              _selectedIndex = index;
            });
          },
          destinations: <NavigationRailDestination>[
            for (int index = 0; index < imagePaths.length; index++)
              NavigationRailDestination(
                icon: Container(
                  width: 46,
                  height: 46,
                  decoration: BoxDecoration(
                    color: _selectedIndex == index
                        ? const Color(0xFF6F6AFF) // Цвет выделения
                        : Colors.transparent,
                    shape: BoxShape.circle,
                  ),
                  child: Center(
                    child: SvgPicture.asset(
                      _selectedIndex == index
                          ? whiteImagePaths[index]
                          : imagePaths[index],
                      width: 28,
                      height: 28,
                    ),
                  ),
                ),
                label: const SizedBox.shrink(), // Пустая метка
              ),
          ],
        ),
      ),
    );
  }

Answer 1

Это делается довольно легко:

// Способ 1
Theme(
  data: ThemeData(
     highlightColor: Colors.transparent,
     splashFactory: NoSplash.splashFactory,
  ),
  child: NavigationRail(...)
),

// Способ 2
Theme(
  data: ThemeData(
    highlightColor: Colors.transparent,
    colorScheme: ColorScheme.light(primary: navigationRailColor) // где navigationRailColor - цвет фона
  ),
  child: NavigationRail(...)
),

Но будьте осторожны, так как это удаляет сплешь и выделение ниже по дереву, а не только для NavigationRail.

Answer 2

Нашел способ отключить стили через Material.. splashFactory: NoSplash.splashFactory оказался не рабочим из-за новой версии Flutter. (больше не поддерживается начиная с выпуска Flutter 3.13.7)

NavigationRailDestination(
  icon: Material(
    color: Colors
        .transparent
    child: InkWell(
      splashColor:
          Colors.transparent,
      highlightColor:
          Colors.transparent, 
      onTap: () {
        setState(() {
          _selectedIndex = index;
        });
      },
      child: Container(
        width: 46,
        height: 46,
        decoration: BoxDecoration(
          color: _selectedIndex == index
              ? const Color(0xFF6F6AFF) // Цвет выделения
              : Colors.transparent,
          shape: BoxShape.circle,
        ),
        child: Center(
          child: SvgPicture.asset(
            _selectedIndex == index
                ? whiteImagePaths[index]
                : imagePaths[index],
            width: 28,
            height: 28,
          ),
        ),
      ),
    ),
  ),
  label: const SizedBox.shrink(),
),

БЛОГ НА HUSL

Не могу убрать выделение при долгом удерживании кнопки в виджете NavigationRail. Flutter

Ответы (2 шт):