flutter / flutter/flutter

ExpansionPanel/ExpansionPanelList: Allow customization of the content background color during expansion

Open
#178,914 4 comments 0 reactions 0 assignees View on GitHub
c: new feature c: proposal p: material_ui P3 package team-design triaged-design
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.