CheckboxListTile in SizedBox override style which is out of box

I have some issue with CheckboxListTile. I use it with SizedBox -> Container -> Scrollbar -> ListView.builder -> _SingleTile -> CheckboxListTile, tileColor of this CheckboxListTile override style which is out of box and scrollable area. I prepare some example:

import 'package:flutter/material.dart';

/// Flutter code sample for [CheckboxListTile].

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const CheckboxListTileExample(),
    );
  }
}

class CheckboxListTileExample extends StatefulWidget {
  const CheckboxListTileExample({super.key});

  @override
  State<CheckboxListTileExample> createState() =>
      _CheckboxListTileExampleState();
}

class _CheckboxListTileExampleState extends State<CheckboxListTileExample> {
  final _scrollController = ScrollController();

  List<String> fruits = ["apple", "pear", "strawberry", "apple1", "pear1", "strawberry1"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('CheckboxListTile Sample')),
      body: Column(
        children: [
          const TextField(
            decoration: InputDecoration(
              labelText: 'label text',
              labelStyle: TextStyle(fontSize: 25),
              hintText: 'hint text',
            ),
          ),
          const SizedBox(height: 10),
          SizedBox(
            height: 200,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0),
                border: Border.fromBorderSide(
                  BorderSide(color: Colors.grey.shade200, width: 2),
                ),
              ),
              child: Scrollbar(
                controller: _scrollController,
                thumbVisibility: true,
                thickness: 4,
                radius: const Radius.circular(10.0),
                child: ListView.builder(
                  reverse: false,
                  shrinkWrap: true,
                  itemBuilder: (BuildContext context, int index) {
                    return _SingleTile(item: fruits[index], index: index);
                  },
                  itemCount: fruits.length,
                  controller: _scrollController,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _SingleTile extends StatefulWidget {
  const _SingleTile({super.key, required this.item, required this.index});

  final String item;
  final int index;

  @override
  State<_SingleTile> createState() => _SingleTileState();
}

class _SingleTileState extends State<_SingleTile> {
  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      title: Text(widget.item),
      tileColor: widget.index % 2 == 0 ? Colors.white : Colors.grey[100],
      value: false,
      onChanged: (bool? value) {},
    );
  }
}

I hope you can easily run this in dartpad as flutter project.

>Solution :

You can solve this by wrapping the ListView in a Material, like

            child: Material(
              child: ListView.builder(
                reverse: false,
                shrinkWrap: true,
                itemBuilder: (BuildContext context, int index) {
                  return _SingleTile(item: fruits[index], index: index);
                },
                itemCount: fruits.length,
                controller: _scrollController,
              ),
            ),