ExpansionPanel/ExpansionPanelList: Allow customization of the content background color during expansion #178914
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: d367fce
expansion-panel-after.mp4
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.
expansion-panel-before.mp4
Code sample
Code sample
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<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
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
[√] 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!