ListTile.selectedTileColor not visible when parent Container has explicit background color

Steps to reproduce

ListTile's selection highlighting (selectedTileColor) becomes invisible or non-functional when the ListTile is nested inside a Container with an explicit color property set.

Steps to Reproduce:

Create a ListView with ListTile items inside a Container
Set an explicit background color on the parent Container (e.g., Color.fromARGB(255, 27, 27, 27))
Set selectedTileColor: Colors.blue on the ListTile
Set selected: true on a ListTile item
Observe that the selection highlighting is not visible

Expected Behavior:

ListTile should display the specified selectedTileColor (blue background) when selected: true, regardless of parent Container background color.

Actual Behavior:

ListTile selection highlighting is not visible when parent Container has an explicit color property. The blue selection background does not appear.

Workaround:

Remove the color property from the parent Container. The selection highlighting works correctly when no explicit color is set on parent containers.

Environment:

Flutter version: 3.35.1
Dart version: 3.9.0 (stable) (Mon Aug 11 07:58:10 2025 -0700) on "windows_x64"
Test Platform: Desktop

Code Description

// This DOESN'T work - selection not visible
Container(
  color: Color.fromARGB(255, 27, 27, 27),
  child: ListView.builder(
    itemBuilder: (context, index) => ListTile(
      title: Text('Item $index'),
      selected: selectedIndex == index,
      selectedTileColor: Colors.blue,
    ),
  ),
)

// This WORKS - selection visible
Container(
  // color: Color.fromARGB(255, 27, 27, 27), // Commented out
  child: ListView.builder(
    itemBuilder: (context, index) => ListTile(
      title: Text('Item $index'),
      selected: selectedIndex == index,
      selectedTileColor: Colors.blue,
    ),
  ),
)

Expected results

ListTile should display the specified selectedTileColor (blue background) when selected: true, regardless of parent Container background color.

Actual results

ListTile selection highlighting is not visible when parent Container has an explicit color property. The blue selection background does not appear.

Code sample

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;
      });
    }
  }
}

Screenshots or Video

Screenshots / Video demonstration

Without container color	With container color

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.35.1, on Microsoft Windows [Version 10.0.26100.4946], locale en-IN) [503ms]
    • Flutter version 3.35.1 on channel stable at D:\Dev\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 20f8274939 (11 days ago), 2025-08-14 10:53:09 -0700
    • Engine revision 1e9a811bf8
    • Dart version 3.9.0
    • DevTools version 2.48.0
    • Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios, cli-animations, enable-lldb-debugging

[✓] Windows Version (11 Pro 64-bit, 24H2, 2009) [5.3s]

[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0) [3.8s]
    • Android SDK at C:\Users\nayan\AppData\Local\Android\Sdk
    • Emulator version 36.1.9.0 (build_id 13823996) (CL:N/A)
    • Platform android-36, build-tools 36.0.0
    • ANDROID_HOME = C:\Users\nayan\AppData\Local\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.6+-13391695-b895.109)
    • All Android licenses accepted.

[✓] Chrome - develop for the web [130ms]
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.14.12) [128ms]
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.14.36408.4
    • Windows 10 SDK version 10.0.26100.0

[✓] Android Studio (version 2025.1.2) [21ms]
    • 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 21.0.6+-13391695-b895.109)

[✓] VS Code (version 1.103.2) [19ms]
    • VS Code at C:\Users\nayan\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.116.0

[✓] Connected device (3 available) [384ms]
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.26100.4946]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 139.0.7258.128
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 139.0.3405.102

[✓] Network resources [598ms]
    • All expected network resources are available.

• No issues found!

@cnayan

@cnayan thanks for the detailed report. as per this comment/explanation, replacing Container with Ink resolves the issue. this seems to be WAI (working as intended).

@tirth-patel-nc

@tirth-patel-nc Nice! Did not know that Ink is like Container.
Would you be updating documentation to use Ink and not Container because of Container's flaw?

@cnayan

@cnayan this is mentioned in the troubleshooting section of the InkWell docs, but it might be worth calling out more prominently in the selectedTileColor documentation.

thanks for the report. labelling it as a documentation proposal. feel free to send the fix.

I would like to take this... would just need some pointers/tips on what should be added to the documentation

I’d like to work on this issue because it affects core Flutter behavior and user experience. Fixing it allows me to contribute a meaningful, scalable solution while deepening my understanding of Flutter’s architecture and best practices.

I’m interested in solving open-source issues because it lets me contribute real value to the community....

And solution is if we use Ink instead of Container for color effects..Container does NOT support Material ink effects like ripple, splash, highlight..

@sumit2393

Hi @sumit2393! Thanks for your insights:) I have this draft PR #174858 which replace Container with Ink. Feel free to take a look. I'll continue to work on it once I get any chance.

@QuncCccccc

@QuncCccccc Do you have 2 PRs open? Which one should we review?

@cnayan

Hi @cnayan, I think there is only one PR open for this issue: #181402

Add warning when there is a widget with color between `Material` and …

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Add warning when there is a widget with color between `Material` and …

Navigation Menu

Repository navigation

`ListTile.selectedTileColor` not visible when parent `Container` has explicit background color #174366

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

ListTile.selectedTileColor not visible when parent Container has explicit background color #174366

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

tirth-patel-nc commented on Aug 26, 2025

cnayan commented on Aug 26, 2025

tirth-patel-nc commented on Aug 27, 2025

srivats22 commented on Aug 27, 2025

4 remaining items

sumit2393 commented on Dec 24, 2025

sumit2393 commented on Dec 24, 2025

QuncCccccc commented on Dec 26, 2025

cnayan commented on Feb 1, 2026

QuncCccccc commented on Feb 2, 2026

github-actions commented on Mar 18, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

`ListTile.selectedTileColor` not visible when parent `Container` has explicit background color #174366