ListTile color property is not working in a drawer with an background image

Question

I want to style my ListTiles in a Drawer (Sidebar). But when the Drawer has a background-image provided by a container the ListTiles are working, but all color options aren't. If you set a static background color with the drawer color argument its working. I dont know what to do anymore. The hierarchy is correct...

Here is my code:

  const NavBar(
      {super.key,
      required this.width,
      required this.height,
      required this.onListTileClicked});
  final double width, height;
  final Function onListTileClicked;

  @override
  Widget build(BuildContext context) {
    return Drawer(
      elevation: 8,
      child: Container(
        height: height,
        width: width,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(
              'assets/img/sidebar_background.png',
            ),
            fit: BoxFit.cover,
          ),
        ),
        child: SafeArea(
          child: Scrollbar(
            child: ListView(
              children: [
                NavigationHeader(
                  height: height / 4,
                  imgUrl:
                      'https://d15f34w2p8l1cc.cloudfront.net/overwatch/aecd8fa677f0093344fab7ccb7c37516c764df3f5ff339a5a845a030a27ba7e0.png',
                  imgWidth: width / 3,
                  padding: 20,
                  account: 'Backxtar#2484',
                  fontSize: 20,
                ),
                ListTile(
                  leading: const Icon(
                    Icons.home,
                    color: Colors.white,
                  ),
                  title: const Text(
                    'Text',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  onTap: () {},
                  tileColor: Colors.red,
                ),
                ListTile(
                  leading: const Icon(
                    Icons.home,
                    color: Colors.white,
                  ),
                  title: const Text(
                    'Text',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  onTap: () {},
                  tileColor: Colors.red,
                ),
                ListTile(
                  leading: const Icon(
                    Icons.home,
                    color: Colors.white,
                  ),
                  title: const Text(
                    'Text',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  onTap: () {},
                  tileColor: Colors.red,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

The reason for this is because a ListTile paints their tileColor on the underlying Material. a Container blocks this material. To solve it you could wrap each ListTile in a Material, like this:

                Material(
                  child: ListTile(
                    leading: const Icon(
                      Icons.home,
                      color: Colors.white,
                    ),
                    title: const Text(
                      'Text',
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                    onTap: () {},
                    tileColor: Colors.red,
                  ),
                ),