import 'package:flutter/material.dart';

class Model {
  final String name;
  Model({required this.name});
}

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      darkTheme: ThemeData.dark(useMaterial3: true),
      home: Scaffold(body: const ListWidgetWrapper(
        // color: Colors.purple  // <<<========== Uncomment this to see the selection background color disappear.
      )),
    );
  }
}

class ListWidgetWrapper extends StatefulWidget {
  final Color? color;

  const ListWidgetWrapper({super.key, this.color});

  @override
  State<ListWidgetWrapper> createState() => _ListWidgetWrapperState();
}

class _ListWidgetWrapperState extends State<ListWidgetWrapper> {
  int? _selectedIndex;
  final ScrollController _scrollController = ScrollController();
  final List<Model> _list = ["AAAA", "BBBB", "CCCC"].map((x) => Model(name: x)).toList();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: widget.color ?? Colors.transparent,
      child: Padding(
        padding: const EdgeInsets.all(4.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: RawScrollbar(
                controller: _scrollController,
                thumbVisibility: true,
                trackVisibility: true,
                thumbColor: Colors.blue.withAlpha(127),
                child: ListView.builder(
                  itemCount: _list.length,
                  controller: _scrollController,
                  hitTestBehavior: HitTestBehavior.opaque,
                  itemBuilder: (context, index) => _buildListItem(index),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildListItem(int index) {
    return ListTile(
      dense: true,
      minTileHeight: 24,
      iconColor: Colors.white,
      titleTextStyle: TextStyle(color: Colors.white, fontSize: 14, decoration: TextDecoration.none),
      leading: const Icon(Icons.storage, size: 12),
      minLeadingWidth: 12,
      horizontalTitleGap: 12,
      title: Text(_list[index].name, maxLines: 1, overflow: TextOverflow.ellipsis, softWrap: false),
      onTap: () => _onTap(index),
      selected: _selectedIndex == index,
      selectedTileColor: Colors.blueAccent, // <<===== I want this color as background color
    );
  }

  void _onTap(int index) {
    if (_selectedIndex != index) {
      setState(() {
        _selectedIndex = index;
      });
    }
  }
}