[Chip] Setting background color obscures material ripple effects #73215
Assignees
Labels
a: quality
A truly polished experience
f: material design
flutter/packages/flutter/material repository.
found in release: 3.3
Found to occur in 3.3
found in release: 3.7
Found to occur in 3.7
framework
flutter/packages/flutter repository. See also f: labels.
has reproducible steps
The issue has been confirmed reproducible and is ready to work on
r: fixed
Issue is closed as already fixed in a newer version
Comments
13 tasks
|
Hi @NWalker1208 |
pedromassangocode
added
in triage
Sure, here is the code from the steps I listed (minus the comments flutter generates): main.dartimport 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, this.title = ''}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
ActionChip(
onPressed: _incrementCounter,
label: Text('Without Background'),
),
ActionChip(
onPressed: _incrementCounter,
label: Text('With Background'),
backgroundColor: Colors.red,
),
],
),
),
);
}
} |
no-response
bot
removed
the
waiting for customer response
|
flutter doctor -v |
pedromassangocode
changed the title
pedromassangocode
added
a: quality
|
Can we hope for a solution to this problem? |
|
By looking at the code you can see that Theme(
data: Theme.of(context).copyWith(canvasColor: Colors.red),
child: FilterChip(
label: Text('Text'),
onSelected: (selected) {},
),
),That's still just a workaround though. |
This was referenced Nov 15, 2022
|
Reproducible on stable 3.3 and master 3.7 Screen.Recording.2022-12-30.at.6.05.22.PM.movflutter doctor -v (mac) |
maheshmnj
added
found in release: 3.3
8 tasks
|
This is fixed by #124673 Screen.Recording.2023-04-18.at.10.51.06.mov |
TahaTesser
added
the
r: fixed
|
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 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Steps to Reproduce
flutter create chip.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
The text was updated successfully, but these errors were encountered: