InkWell ripple effect not visible on initial tap

[Sasikumar3595]

I was used the inkwell widget on flutter application to show and hide some widgets through inkwell interaction(tap, longpress). But the inkwell ripple effect have not working properly on initial tap interaction. I was added the sample and replicated video as below,

Issue replicated video:
InkWell initial ripple animation issue.mov.zip

Sample:
inkwell_initial_ripple.zip

Steps to Reproduce

1. Run the attached sample
2. Tap the show/hide button(inkwell)
3. Initial tap ripple effect not working correctly.

Expected results:

• Initial tap ripple animation will look like the next time tap ripple animation

Actual results:

• Initial tap ripple animation does not look like the next time tap ripple animation

Note: The issue reproduced on flutter stable branch also.

[pedromassangocode]

I was able to reproduce this issue on latest stable and master channel. On initial tap the ripple effect is a little bit invisible.

Possibly I found a similar issue (video on the right) where touch and press are handled differently by the InkWell widget.

Cc @HansMuller

Actual issue	Maybe a similar issue (tap vs press)

sample code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final style = TextStyle(fontSize: 18);
    return MaterialApp(
      title: 'Flutter InkWell Issue',
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Column(
            children: [
              Text('Trackpad touch', style: style,),
              Expanded(
                child: InkWell(onTap: () {}),
              ),
              Divider(),
              Text('Trackpad press', style: style,),
              Expanded(
                child: InkWell(onTap: () {}),
              ),
            ],
          ),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 1.20.4, on Mac OS X 10.15.6 19G2021, locale en)
    • Flutter version 1.20.4 at /Users/pedromassango/dev/SDKs/flutter_stable
    • Framework revision fba99f6cf9 (2 weeks ago), 2020-09-14 15:32:52 -0700
    • Engine revision d1bc06f032
    • Dart version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0, Build version 12A7209
    • CocoaPods version 1.9.3

[!] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] IntelliJ IDEA Community Edition (version 2020.2.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 49.0.4
    • Dart plugin version 202.7319.5

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

[✓] Connected device (1 available)
    • iPhone 11 Pro Max (mobile) • 7A82F29E-E49E-4B3C-8609-1570361DBC17 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-0 (simulator)

! Doctor found issues in 1 category.
Process finished with exit code 0

[Sasikumar3595]

Hi @pedromassangocode ,

I was validated the issue and the issue only occurred when add a new widget on inkwell interaction(tap). In the above mentioned sample, i was add new list view when the inkwell tapped, if does not add the new widget then it works fine and the ripple effects delayed or not visible based on the newly added widget depth or weight.

Thanks in advance.

[maheshj01]

Hi @Sasikumar3595, I tried to reproduce the issue and I see the Inkwell ripple effect is shown on every tap (including the first), I can no longer reproduce the issue. I am going to close tihs issue since its not reproducible. In case you still encounter the bug, feel free to leave a comment on this issue and we will reopen it.

Screen.Recording.2022-11-24.at.4.54.13.PM.mov

code sample

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter InkWell Issue',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter InkWell Issue'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  bool _showResults = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: MyDemoHome(
        showResults: _showResults,
        callback: updateValue,
      )), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  void updateValue() {
    setState(() {
      _showResults = !_showResults;
    });
  }
}

class MyDemoHome extends StatefulWidget {
  const MyDemoHome({Key? key, this.showResults = false,required this.callback})
      : super(key: key);

  final bool showResults;
  final VoidCallback callback;

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

class _MyDemoHomeState extends State<MyDemoHome> {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 400,
        width: 300,
        child: Stack(
          children: [
            Positioned(
              top: 50,
              left: 0,
              width: 200,
              height: 40,
              child: InkWell(
                  onTap: () {
                    widget.callback();
                  },
                  child: Container(
                      height: 40,
                      width: 200,
                      child: Text(!widget.showResults ? 'Show' : 'Hide'))),
            ),
            Positioned(
                top: 100,
                left: 0,
                width: 200,
                height: 40,
                child: Container(
                  color: Colors.red,
                  height: 40,
                  width: 200,
                  child: Text('Search Results'),
                )),
            !widget.showResults
                ? Container(
                    width: 0,
                    height: 0,
                  )
                : Positioned(
                    top: 200,
                    left: 0,
                    width: 300,
                    bottom: 40,
                    child: ListView.builder(
                        itemCount: 50,
                        itemBuilder: (BuildContext context, int index) {
                          return Container(
                            padding: EdgeInsets.all(2),
                            color: Colors.blue,
                            height: 25,
                            child: Text('Search Results ' + index.toString()),
                          );
                        }))
          ],
        ));
  }
}

flutter doctor -v (mac)

[✓] Flutter (Channel master, 3.6.0-6.0.pre.33, on macOS 12.6 21G115 darwin-arm64,
    locale en-IN)
    • Flutter version 3.6.0-6.0.pre.33 on channel master at
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision a9858ec524 (72 minutes ago), 2022-11-21 10:58:11 -0500
    • Engine revision 46a6b54295
    • Dart version 2.19.0 (build 2.19.0-406.0.dev)
    • DevTools version 2.19.0
    • If those were intentional, you can disregard the above warnings; however it is
      recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • 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.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • 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.12+0-b1504.28-7817840)

[✓] 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.70.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.53.20221101

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64
      • macOS 12.6 21G115 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript
      • Google Chrome 107.0.5304.110

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

• No issues found!

[✓] Flutter (Channel stable, 3.3.9, on macOS 12.6 21G115 darwin-arm, locale en-IN)
    • Flutter version 3.3.9 on channel stable at /Users/mahesh/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (24 hours ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • 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.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14A400
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • 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.12+0-b1504.28-7817840)

[✓] 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.70.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.53.20221101

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.110

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

• No issues found!

Thank you.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.