ListView/ListTile: Hover highlight being drawn outside the list boudnaries (on top of other unrelated widgets)

[Grench6]

Steps to reproduce

1. Create a Column with two children: first a "header" Text (wrapped with Padding) and then a ListView (wrapped by an Expanded widget).
2. Add some ListTile widgets to the list (e.g., 50). It is important that they have a non-null onTap callback function (in order to enable the hover highlighting).
3. Build and launch the app (I've tested it on both Windows and Web (with DartPad)).
4. Scroll the list until a tile is partially hidden by the header text.
5. Hover over the visible part of the tile.
6. Notice how the highlighting is drawn on top of the header text.

Here is an example of the relevant part of the widget tree:

Column(
  children: [
    Padding(
      padding: const EdgeInsets.all(16.0),
      child: const Text('HEADER'),
    ),
    Expanded(
      child: ListView.builder(
        itemCount: 50,
        itemBuilder: (context, index) => ListTile(
          title: Text('Tile $index'),
          onTap: () {},
        ),
      ),
    ),
  ],
),

Expected results

It is expected that the highlighting is drawn inside the ListView boundaries.

Actual results

Instead, the highlighting is being drawn outside the ListView boundaries. Thus, it seems to overflow and to draw itself over other widgets being displayed on screen.

Code sample

Code sample

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: const Text('HEADER'),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: 50,
                itemBuilder: (context, index) => ListTile(
                  title: Text('Tile $index'),
                  onTap: () {},
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Logs

No response

Flutter Doctor output

Doctor output

Please note that this issue also happens on DartPad (where I'm unable to run flutter doctor), so my local version/config seems completely irrelevant. However, here it is as requested:

[√] Flutter (Channel stable, 3.19.5, on Microsoft Windows [Version 10.0.22631.3593], locale en-US)
    • Flutter version 3.19.5 on channel stable at C:\Files\sdk\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 300451adae (7 weeks ago), 2024-03-27 21:54:07 -0500
    • Engine revision e76c956498
    • Dart version 3.3.3
    • DevTools version 2.31.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\David\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9884540)
    • All Android licenses accepted.

[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2022 17.6.4)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools
    • Visual Studio Build Tools 2022 version 17.6.33815.320
    • Windows 10 SDK version 10.0.22621.0

[√] Android Studio (version 2022.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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 17.0.6+0-b2043.56-9884540)

[√] Connected device (2 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22631.3593]
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 123.0.2420.81

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

! Doctor found issues in 1 category.

[Grench6]

The issue also happens when the ListTile is selected.

[danagbemava-nc]

Hi @Grench6, this is a known issue which is being tracked in
#86584
#73315

Your workaround for now should be either wrapping the ListView.builder with a Material or wrapping the ListTile with a Material (going the route of the latter might lead to performance issues so take that under consideration).

Closing this since it is already being tracked in other issues