How to remove InkWell hover color overflow outside parent ListView in Flutter?

Question

I have a page with some static content and a ListView with custom list tiles using InkWell. Here's my issue: if you hover the cursor over an InkWell near the top or bottom of the ListView and start to scroll, the hover color shows up outside the bounds of the ListView even though the other content is clipped as you'd expect. I need a hover state on the list items, but don't want the hover color extending past the intended bounds of the ListView. Is there a way to make sure the ListView clips the hover color for those InkWells too or should I be looking at a different/custom widget solution? I've tried wrapping the InkWell with different parents (Container, etc) and experimented with setting clipBehavior in a couple places, but no avail.

Here's a simple case replicated from a random Flutter example. Note the InkWell in CustomListItem and the ListView in MyStatelessWidget.

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 MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class CustomListItem extends StatelessWidget {
  const CustomListItem({
    Key? key,
    required this.thumbnail,
    required this.title,
    required this.user,
    required this.viewCount,
  }) : super(key: key);

  final Widget thumbnail;
  final String title;
  final String user;
  final int viewCount;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 5.0),
      child: InkWell(
        onTap: () {},
        hoverColor: Colors.pink,
        child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Expanded(
            flex: 2,
            child: thumbnail,
          ),
          Expanded(
            flex: 3,
            child: _VideoDescription(
              title: title,
              user: user,
              viewCount: viewCount,
            ),
          ),
          const Icon(
            Icons.more_vert,
            size: 16.0,
          ),
        ],
      ),),
    );
  }
}

class _VideoDescription extends StatelessWidget {
  const _VideoDescription({
    Key? key,
    required this.title,
    required this.user,
    required this.viewCount,
  }) : super(key: key);

  final String title;
  final String user;
  final int viewCount;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(5.0, 0.0, 0.0, 0.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            title,
            style: const TextStyle(
              fontWeight: FontWeight.w500,
              fontSize: 14.0,
            ),
          ),
          const Padding(padding: EdgeInsets.symmetric(vertical: 2.0)),
          Text(
            user,
            style: const TextStyle(fontSize: 10.0),
          ),
          const Padding(padding: EdgeInsets.symmetric(vertical: 1.0)),
          Text(
            '$viewCount views',
            style: const TextStyle(fontSize: 10.0),
          ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
        children: [
          Container(
            padding: const EdgeInsets.only(bottom: 20),
            child: const Text('Hover over the first list item and scroll... the content is clipped, but not the hover color...'),
          ),
          Expanded(
            child: ListView(
      padding: const EdgeInsets.all(8.0),
      itemExtent: 106.0,
      children: <CustomListItem>[
        CustomListItem(
          user: 'Flutter1',
          viewCount: 999001,
          thumbnail: Container(
            decoration: const BoxDecoration(color: Colors.blue),
          ),
          title: 'Test One...',
        ),
        CustomListItem(
          user: 'Flutter2',
          viewCount: 999002,
          thumbnail: Container(
            decoration: const BoxDecoration(color: Colors.orange),
          ),
          title: 'Test Two...',
        ),
        CustomListItem(
          user: 'Flutter3',
          viewCount: 999003,
          thumbnail: Container(
            decoration: const BoxDecoration(color: Colors.blue),
          ),
          title: 'Test Three...',
        ),
        CustomListItem(
          user: 'Flutter4',
          viewCount: 999004,
          thumbnail: Container(
            decoration: const BoxDecoration(color: Colors.orange),
          ),
          title: 'Test Four...',
        ),
        CustomListItem(
          user: 'Flutter5',
          viewCount: 999005,
          thumbnail: Container(
            decoration: const BoxDecoration(color: Colors.blue),
          ),
          title: 'Test Five...',
        ),
      ],
    ),
          ),
        ],
      );
  }
}

Images for visual reference:

Solution

you can use HoverWidget and HoverContainerfor specified List view.

HoverWidget(
            hoverChild: Container(
              height: 200,
              width: 200,
              color: Colors.green,
              child: Center(child: Text('Hover Me..')),
            )
HoverContainer(
              width: 200,
              height: 200,
              hoverHeight: 220,
              hoverWidth: 220,
              color: Colors.red,
              hoverColor: Colors.green,
            )

More details on its official site:https://pub.dev/packages/hovering/example