ExpansionPanel/ExpansionPanelList: Allow customization of the content background color during expansion
- Dominant language
- Dart
- Stars
- 179k
- Forks
- 31.1k
- PR merge metrics
- PR metrics pending
Description
### Steps to reproduce
When using ExpansionPanel inside ExpansionPanelList, if i have the body of the expandend panel with a color that differ from the backgroundColor variable of itself, it looks like it's "flashing" the bg color during the animation.
### Expected results
I think this could be an actual good result, I made a minor change adding a contentBackground variable here: https://github.com/flutter/flutter/commit/d367fce7cb53921fd158f16738e2d1ed16aebcae
https://github.com/user-attachments/assets/6cd79df6-df69-4351-b484-301fdd4e16fa
### Actual results
This is the actual result, you can see that the expansion show the background color of the expansionpanel, that then get overlapped by actual content (i slowed down the video to make the problem more visible, but in normal animation duration is more annoying). I think the problem is that the animation is using the fading as well, maybe another solution could be to make the animation customizable by the user.
https://github.com/user-attachments/assets/345e22eb-48f1-4087-813f-fe1c32b604ff
### Code sample
Code sample
```dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(home: const MyHomePage());
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int selectedIndex = -1;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Flutter Demo')),
body: Center(
child: ListView(
padding: EdgeInsets.all(20),
children: [
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: ExpansionPanelList(
expansionCallback: (_, isExpanded) {
if (isExpanded) {
setState(() => selectedIndex = 1);
} else {
setState(() => selectedIndex = -1);
}
},
children: [
ExpansionPanel(
isExpanded: selectedIndex == 1,
canTapOnHeader: true,
backgroundColor: Colors.orange,
contentColor: Colors.white,
headerBuilder: (context, isExpanded) {
return Padding(
padding: const EdgeInsets.all(20),
child: Text("NAME"),
);
},
body: ListView.separated(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: 20,
separatorBuilder: (context, index) =>
const Divider(height: 1, color: Colors.black),
itemBuilder: (context, index) {
return Container(
color: Colors.green.shade400,
padding: const EdgeInsets.all(12),
child: Text("NOTES"),
);
},
),
),
],
),
),
],
),
),
);
}
}
```
### Screenshots or Video
### Logs
### Flutter Doctor output
Doctor output
```console
[√] Flutter (Channel stable, 3.38.2, on Microsoft Windows [Versione 10.0.26200.7171], locale it-IT)
[√] Windows Version (11 Pro 64-bit, 25H2, 2009)
[√] Android toolchain - develop for Android devices (Android SDK version 36.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.14.13 (August 2025))
[√] Connected device (4 available)
[√] Network resources
• No issues found!
```
Contributor guide
Assessment
This issue has not been assessed yet.