Skip to content

ListTile show tile color even a Container wraps it#174858

Closed
QuncCccccc wants to merge 7 commits intoflutter:masterfrom
QuncCccccc:list_tile_background_color_fix
Closed

ListTile show tile color even a Container wraps it#174858
QuncCccccc wants to merge 7 commits intoflutter:masterfrom
QuncCccccc:list_tile_background_color_fix

Conversation

@QuncCccccc
Copy link
Contributor

@QuncCccccc QuncCccccc commented Sep 3, 2025

Fixes #174366 so that the tile background color wouldn't be hidden behind parent containers.

This PR is to replace Ink with Material and moved the original Ink.shape and Ink.color to Material.shape and Material.color.

Set selectedTileColor: Colors.blueAccent, to ListTile and use Container with purple background to wrap the ListTile.
Before:

Screen.Recording.2025-09-05.at.6.08.22.PM.mov

After:

Screen.Recording.2025-09-05.at.6.07.39.PM.mov

Pre-launch Checklist

  • I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
  • I read the [Tree Hygiene] wiki page, which explains my responsibilities.
  • I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement].
  • I signed the [CLA].
  • I listed at least one issue that this PR fixes in the description above.
  • I updated/added relevant documentation (doc comments with ///).
  • I added new tests to check the change I am making, or this PR is [test-exempt].
  • I followed the [breaking change policy] and added [Data Driven Fixes] where supported.
  • All existing and new tests are passing.

@github-actions github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Sep 3, 2025
@QuncCccccc QuncCccccc force-pushed the list_tile_background_color_fix branch from 21d7e30 to 216e8d4 Compare September 4, 2025 06:48
@github-actions github-actions bot added d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos labels Sep 5, 2025
@QuncCccccc QuncCccccc force-pushed the list_tile_background_color_fix branch from 885f4a3 to 3852caa Compare September 5, 2025 20:16
@QuncCccccc
Copy link
Contributor Author

QuncCccccc commented Sep 6, 2025

Created cl/803350373 for g3fix, the rest of failures are expected.

@dkwingsmt
Copy link
Contributor

This implementation adds a Material to each ListTile in a list. I suspect this will be a performance problem, since each PhysicalShape pushes a new layer. I don't remember where but I think we rejected a PR or proposal that does exactly this. I might be wrong but I guess that the Material widget was designed exactly for this case so that multiple responses can be drawn on the same layer.

Is it possible to keep the current implementation and add some quick check? For example, make ListTile check the widgets between itself and its closest Material, and warn if there are Containers with solid backgrounds.

@QuncCccccc
Copy link
Contributor Author

Thank you for the review! I'm currently working on another PR. Will come back once the other one is landed!

@Piinks
Copy link
Contributor

Piinks commented Jan 12, 2026

Greetings from stale PR triage! 👋
Is this change still on your radar?

@QuncCccccc
Copy link
Contributor Author

Close this for now. Will reopen it once I get a chance to work on the issue.

@QuncCccccc
Copy link
Contributor Author

I'll continue to work on this. I opened a new PR #181402 and addressed @dkwingsmt's comment.

@victorsanni victorsanni mentioned this pull request Jan 23, 2026
9 tasks
github-merge-queue bot pushed a commit that referenced this pull request Mar 3, 2026
…`ListTile` (#181402)

Fixes #174366

This PR is to throw exception when there is a widget with a
non-transparent color (like a `Container(color: Colors.pink)`) between
`ListTile` and `Material`. The fix is based on
[comment](#174858 (comment))
in the original fix PR which has been closed.

## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

**Note**: The Flutter team is currently trialing the use of [Gemini Code
Assist for
GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code).
Comments from the `gemini-code-assist` bot should not be taken as
authoritative feedback from the Flutter team. If you find its comments
useful you can update your code accordingly, but if you are unsure or
disagree with the feedback, please feel free to wait for a Flutter team
member's review for guidance on which automated comments should be
addressed.

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
xxxOVALxxx pushed a commit to xxxOVALxxx/flutter that referenced this pull request Mar 10, 2026
…`ListTile` (flutter#181402)

Fixes flutter#174366

This PR is to throw exception when there is a widget with a
non-transparent color (like a `Container(color: Colors.pink)`) between
`ListTile` and `Material`. The fix is based on
[comment](flutter#174858 (comment))
in the original fix PR which has been closed.

## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

**Note**: The Flutter team is currently trialing the use of [Gemini Code
Assist for
GitHub](https://developers.google.com/gemini-code-assist/docs/review-github-code).
Comments from the `gemini-code-assist` bot should not be taken as
authoritative feedback from the Flutter team. If you find its comments
useful you can update your code accordingly, but if you are unsure or
disagree with the feedback, please feel free to wait for a Flutter team
member's review for guidance on which automated comments should be
addressed.

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

3 participants