BottomNavigationBar Tooltip cancels ink Ripple effect or other effects.

[muhammadkamel]

The splash color disappears when the tooltip appears, needs to be like the native (Bottom Navigation Bar).

theme: ThemeData( highlightColor: Colors.transparent, splashFactory: InkRipple.splashFactory, ),

[maheshj01]

Hi @muhammadkamel, Thanks for filing the issue. Please share a minimal and complete reproducible code and the output of flutter doctor -v along with the steps to reproduce the issue.

[muhammadkamel]

Here I am changing the ink splash to be like the native approach (splashFactory: InkRipple.splashFactory), but the main issue is related to the tooltip. When I am pressing on the nav button the splash color shows for a moment and disappears when the tooltip appears. Note when I disabled the tooltip or make it as a (triggerMode: TooltipTriggerMode.manual), the splash color shows for a long time without a tooltip. But in the native, both are showing normally together (Splash color and tooltip).

[maheshj01]

Thanks for the info @Mohammadkamel. Please share minimal and complete reproducible code which I can directly paste and run to better address the issue. Additionally please confirm, if this is the same issue https://github.com/flutter/flutter/issues/29558 ?

[muhammadkamel]

Yes, this is the same issue #29558, but with the Bottom Navigation Bar items.

[maheshj01]

Reproducible on stable and the master channel when the tooltip appears, Ink Ripple stops

https://user-images.githubusercontent.com/31410839/167362312-47a1b1eb-d63b-4688-a97d-faf0bddccd8b.mov

code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

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

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

flutter doctor -v (mac)

[✓] Flutter (Channel stable, 2.10.5, on macOS 12.3 21E230 darwin-arm, locale en-IN)
    • Flutter version 2.10.5 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5464c5bac7 (12 hours ago), 2022-04-18 09:55:37 -0700
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.65.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.39.20220405

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.2:55555                    • android-arm64  • Android 11 (API 30)
    • iPhone 12 Pro (mobile) • 535317A4-921C-488F-B234-C2CC6D4AE5A1 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.3 21E230 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 100.0.4896.88

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[✓] Flutter (Channel master, 2.13.0-0.0.pre.808, on macOS 12.3 21E230 darwin-arm, locale en-IN)
    • Flutter version 2.13.0-0.0.pre.808 at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2eed8cbf93 (4 days ago), 2022-04-28 22:29:06 -0400
    • Engine revision dfdfe0b3b0
    • Dart version 2.18.0 (build 2.18.0-66.0.dev)
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! CocoaPods 1.10.2 out of date (1.11.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.66.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.0

[✓] Connected device (3 available)
    • Redmi K20 Pro (mobile) • 192.168.1.2:5555 • android-arm64  • Android 11 (API 30)
    • macOS (desktop)        • macos            • darwin-arm64   • macOS 12.3 21E230 darwin-arm
    • Chrome (web)           • chrome           • web-javascript • Google Chrome 100.0.4896.127

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

[muhammadkamel]

Any updates?

[muhammadkamel]

Still reproducible in Flutter 3.

[maheshj01]

Any updates?

@muhammadkamel someone from the team should review the issue soon, Also when this gets fixed the fix will be available on the master channel. More about the flutter release cycle can be found here https://github.com/flutter/flutter/wiki/Flutter-build-release-channels

[muhammadkamel]

Any updates or interesting on solve this issue?

[muhammadkamel]

Still reproducible in Flutter 3.3.1

[muhammadkamel]

Still reproducible in Flutter 3.7

[flutter-triage-bot[bot]]

This issue is missing a priority label. Please set a priority label when adding the triaged-design label.

[HansMuller]

CC @LongCatIsLooong

[LongCatIsLooong]

Looks like when a tab is long pressed, the Tooltip widget claims the long press gesture over the InkResponse and causes _InkResponseState.handleTapCancel being called.

[muhammadkamel]

Any updates?

[muhammadkamel]

@TahaTesser Any updates?

[TahaTesser]

@TahaTesser

Any updates?

Could you please try NavigationBar? You can probably customise it to look like BottomNavigationBar?