Custom backgroundColor on Chip makes it flicker between state transitions #146730
Description
Steps to reproduce
- Run the sample code
- Tapping on the chips
Expected results
No flickering
Actual results
I'm not sure if this is by design but the flickering looks wrong to me.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: SamplePage(),
));
}
class SamplePage extends StatefulWidget {
const SamplePage({super.key});
@override
State<SamplePage> createState() => _SamplePageState();
}
class _SamplePageState extends State<SamplePage> {
var selected = 1;
var disableBackgroundColor = false;
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
setState(() {
disableBackgroundColor = !disableBackgroundColor;
});
},
label: disableBackgroundColor
? const Text('Enable Background Color')
: const Text('Disable Background Color'),
),
body: Center(
child: Wrap(
spacing: 8,
runSpacing: 8,
children: [
for (var i = 1; i < 4; i++)
ChoiceChip(
showCheckmark: false,
backgroundColor: disableBackgroundColor ? null : Colors.red,
selected: selected == i,
onSelected: (selected) => setState(() {
this.selected = i;
}),
label: Text(
'Chip $i',
),
),
],
),
),
);
}
}
Screenshots or Video
Screenshots / Video demonstration
Screen.Recording.2024-04-14.at.18.59.30.mov
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.19.5, on macOS 14.4.1 23E224 darwin-arm64, locale en-VN)
• Flutter version 3.19.5 on channel stable at /Users/khoa/SDK/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 300451adae (2 weeks ago), 2024-03-27 21:54:07 -0500
• Engine revision e76c956498
• Dart version 3.3.3
• DevTools version 2.31.1
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at /Users/khoa/Library/Android/sdk
• Platform android-34, build-tools 33.0.0
• Java binary at: /Users/khoa/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/223.8836.35.2231.11090377/Android
Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15E204a
• CocoaPods version 1.14.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.1)
• Android Studio at /Users/khoa/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9619390/Android Studio.app/Contents
• 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 11.0.15+0-b2043.56-8887301)
[✓] Android Studio (version 2022.3)
• Android Studio at /Users/khoa/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/223.8836.35.2231.11090377/Android Studio.app/Contents
• 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 17.0.6+0-17.0.6b829.9-10027231)
[✓] VS Code (version 1.88.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.86.0
[✓] Connected device (3 available)
• iPhone 15 Pro Max (mobile) • C18B879E-A687-4876-A901-8712C59EAECB • ios • com.apple.CoreSimulator.SimRuntime.iOS-17-4 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 14.4.1 23E224 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 123.0.6312.123
[✓] Network resources
• All expected network resources are available.
• No issues found!Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listflutter/packages/flutter/material repository.Found to occur in 3.19Found to occur in 3.22flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onIssue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages team
Type
Projects
Status