ListTile ripple effect does not show when certain background color are applied

[Kykal]

Steps to reproduce

1. Make a default Flutter project
2. Inside Scaffold widget body insert a Column/ListView widget
3. Place a ListTile widget with an empty onTap method, tap it and ripple effect will show
4. Place a ListTile widget with an empty onTap method inside a Container widget with any color except any black variant colors, tap it and ripple effect will not show

Expected results

Ripple effect should show when using any background color.

Actual results

Ripple effect is not showing when applying certain background colors

Code sample

Base code

import 'package:flutter/material.dart';


//Components
import './test.dart';


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

class MyApp extends StatelessWidget {
  const MyApp({super.key});


  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'ListTile Widget ripple effect issue',
      home: Test(),
    );
  }
}

Code sample

import 'package:flutter/material.dart';


class Test extends StatelessWidget {
  const Test({ super.key });

  @override
  Widget build( BuildContext context ) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          const Text('Reference'),
          ListTile(
            onTap: () {},
            title: const Text('Without background'),
          ),
          const Divider(),
          const Text('ColoredBox widget'),
          ColoredBox(
            color: Colors.white,
            child: ListTile(
              onTap: () {},
              title: const Text('White background'),
            ),
          ),
          ColoredBox(
            color: Colors.black12,
            child: ListTile(
              onTap: () {},
              title: const Text('Black12 background'),
            ),
          ),
          ColoredBox(
            color: Colors.red,
            child: ListTile(
              onTap: () {},
              title: const Text('Red background'),
            ),
          ),
          ColoredBox(
            color: Colors.blue,
            child: ListTile(
              onTap: () {},
              title: const Text('Blue background'),
            ),
          ),
          const Divider(),
          const Text('Container widget'),
          Container(
            color: Colors.white,
            child: ListTile(
              onTap: () {},
              title: const Text('White background'),
            ),
          ),
          Container(
            color: Colors.black12,
            child: ListTile(
              onTap: () {},
              title: const Text('Black12 background'),
            ),
          ),
          Container(
            color: Colors.red,
            child: ListTile(
              onTap: () {},
              title: const Text('Red background'),
            ),
          ),
          Container(
            color: Colors.blue,
            child: ListTile(
              onTap: () {},
              title: const Text('Blue background'),
            ),
          ),
        ],
      ),
    );
  }
}

Screenshots or Video

Pressing twice each ListTile widget

Screenshots / Video demonstration

ripple_webm.webm

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[Γ£ô] Flutter (Channel stable, 3.19.3, on Microsoft Windows [Version 10.0.22631.3296], locale es-MX)
[Γ£ô] Windows Version (Installed version of Windows is version 10 or higher)
[Γ£ô] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[Γ£ô] Chrome - develop for the web
[Γ£ô] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.8.6)
[Γ£ô] Android Studio (version 2023.1)
[Γ£ô] VS Code (version 1.87.2)
[Γ£ô] Connected device (4 available)
[Γ£ô] Network resources

ΓÇó No issues found!

[Michal-MK]

black12 is actually fully black with 12% opacity, and ripples are shown not directly on the ListTile but on a Material beneath it, So it works for the black color as you are not covering the material provided by MaterialApp. If you provided a more opaque black e.g. black87 the ripple would be almost invisible. If you still want a ripple you can wrap the ListTile with another Material

Material(
 type: MaterialType.transparency,
 child: ... 
)

That way you will have the color of the Container and the ripple of the Material.

[huycozy]

This reminds me of a case at #86584 when ListTile widgets are drawn outside the parent Container. The same workaround can be applied there. The cause could be similar but the case is not the same. So I will keep this issue open as a separate issue for other's thoughts.

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.19.4, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.4 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 68bfaea224 (29 hours ago), 2024-03-20 15:36:31 -0700
    • Engine revision a5c24f538d
    • Dart version 3.3.2
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.58

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.21.0-13.0.pre.20, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.21.0-13.0.pre.20 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 085dbd85f9 (3 hours ago), 2024-03-22 21:43:20 -0400
    • Engine revision 8a51e124fb
    • Dart version 3.4.0 (build 3.4.0-262.0.dev)
    • DevTools version 2.34.0-dev.12
    • 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 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.58
    ! Error: iPhone has recently restarted. Xcode will continue when iPhone is unlocked. (code -14)

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.