[Chip] Setting background color obscures material ripple effects #73215
Description
Steps to Reproduce
- Run
flutter create chip. - Update main.dart as follows:
- Remove the FAB
- Add two ActionChips after the counter Text widget
- Give both chips onPressed events (_incrementCounter)
- Give one chip a backgroundColor (Colors.red)
- Tap both ActionChips.
Expected results:
Both chips should have a ripple effect when you press them.
Actual results:
The chip with the background color has no ripple effect.
Cause
After looking at the Flutter source code for the RawChip widget, the issue seems to be that chips use a Container within a Material widget to display their background color. The default chip colors are not actually grey, but black or white (depending on the theme) with opacity. That opacity produces a grey color when mixed with the default Canvas color, and it allows ripple effects to show through the Container.
However, if a developer provides a background color, any non-translucent colors completely obscure the Material widget and its ripple effects. This behavior is different than that of the RaisedButton widget, which directly sets the color of its Material widget based on the given background color.
I have already created a branch that alters the RawChip widget to apply color to its Material widget instead of a Container. This fixes the issue, however, it does so by using Color.alphaBlend so that ChipTheme's default translucent colors do not need to be altered. A full solution should also correct those default colors to be actual shades of grey, so that RawChip can use the colors it is given without using alphaBlend to emulate current behavior.
Unfortunately, the changes I made do not pass existing tests, and I am not yet sufficiently familiar with Flutter testing to attempt to alter those tests. This change in behavior could also be a breaking change for some projects.
Draft pull request with my fixes: #73216
Related Issues
#41461 [Chip] Delete icon ripple not visible for Chip when background color is set
Logs
\chip>flutter analyze
Analyzing chip...
No issues found! (ran in 2.5s)
\chip>flutter doctor -v
[√] Flutter (Channel master, 1.26.0-2.0.pre.167, on Microsoft Windows [Version 10.0.19042.685], locale en-US)
• Flutter version 1.26.0-2.0.pre.167 at d:\Developer\flutter
• Framework revision d3a2259541 (2 days ago), 2020-12-31 15:14:03 -0500
• Engine revision 82b4ae86d6
• Dart version 2.12.0 (build 2.12.0-179.0.dev)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
• Android SDK at D:\Developer\Android\SDK
• Platform android-30, build-tools 30.0.1
• ANDROID_SDK_ROOT = D:\Developer\Android\SDK
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.7.6)
• Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
• Visual Studio Community 2019 version 16.7.30611.23
• Windows 10 SDK version 10.0.18362.0
[√] Android Studio (version 4.1.0)
• 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 1.8.0_242-release-1644-b01)
[√] Connected device (2 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19042.685]
• Chrome (web) • chrome • web-javascript • Google Chrome 87.0.4280.88
• No issues found!
Metadata
Metadata
Assignees
Labels
Type
Projects
Status