How to add background color for ExpansionPanel in Flutter

Question

I am trying to style ExpansionPanel in Flutter but the color is not applying to the whole panel. I have tried both Container and Card widget, the color is not updating. Any Ideas? I want to add background color to cover the entire ExpansionPanel. Is there a way to add the parent theme to the ExpansionPanel.

Card

Card(
  elevation: 2.0,
  color: Theme.of(context).primaryColor,
  margin: EdgeInsets.only(left: 10.0,right: 10.0,top: 10.0),
  child: ExpansionPanelList(
    expansionCallback: (int index, bool isExpanded) {
      setState(() {
        _items[index].isExpanded = !_items[index].isExpanded;
        Timer(Duration(milliseconds: 200), () {
          setState(() {
            _reconfigureFAB();
          });
        });
      });
    },
    children: _items.map((IncludedItem item) {
      return ExpansionPanel(
        headerBuilder: (BuildContext context, bool isExpanded) {
          return Container(
            padding: EdgeInsets.only(left: 18.0),
            child: Row(children: [
              Text(
                "What's included",
                textAlign: TextAlign.start,
                style: TextStyle(
                    fontFamily: 'Bold',
                    fontSize: 33.0,
                    color: Theme.of(context).backgroundColor),
              ),
            ]),
          );
          ;
        },
        isExpanded: item.isExpanded,
        body: Container(
          child: Text("body"),
        ),
      );
    }).toList(),
  ),
);

Container

Container(
  color: Theme.of(context).primaryColor,
  margin: EdgeInsets.only(left: 10.0,right: 10.0,top: 10.0),
  child: ExpansionPanelList(
    expansionCallback: (int index, bool isExpanded) {
      setState(() {
        _items[index].isExpanded = !_items[index].isExpanded;
        Timer(Duration(milliseconds: 200), () {
          setState(() {
            _reconfigureFAB();
          });
        });
      });
    },
    children: _items.map((IncludedItem item) {
      return ExpansionPanel(
        headerBuilder: (BuildContext context, bool isExpanded) {
          return Container(
            padding: EdgeInsets.only(left: 18.0),
            child: Row(children: [
              Text(
                "What's included",
                textAlign: TextAlign.start,
                style: TextStyle(
                    fontFamily: 'Bold',
                    fontSize: 33.0,
                    color: Theme.of(context).backgroundColor),
              ),
            ]),
          );
          ;
        },
        isExpanded: item.isExpanded,
        body: Container(
          child: Text("body"),
        ),
      );
    }).toList(),
  ),
);

Kirill Shashov · Accepted Answer · 2018-07-13T13:15:08.657

35

ExpansionPanelList uses cardColor color from your theme. You can specify it in MaterialApp (theme property) or override it in your widget:

Container(
          color: Theme.of(context).primaryColor,
          margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 10.0),
          child: Theme(
            data: Theme.of(context).copyWith(cardColor: Colors.red),
            child: ExpansionPanelList(
                ...

edited Jul 13 '18 at 13:15

answered Jul 13 '18 at 12:49

Kirill Shashov

989
1
13
13

Thank you !! I will remember this !! – Shashi Kiran Jul 13 '18 at 15:42
1

Is there a way to change the dropdown icon color? – Shashi Kiran Jul 13 '18 at 15:47
1

@ShashiKiran At the moment there is no way to change a color of `ExpandIcon`: https://github.com/flutter/flutter/issues/18992 – Kirill Shashov Jul 13 '18 at 16:09
1

@KirillShashov How did you know the ExpansionPanelList uses cardColor color – Hicham Oct 28 '20 at 22:00
@KirillShashov How to change the background color of only the header? – Narayan Choudhary Jun 26 '21 at 04:00
@NarayanChoudhary I haven't used Flutter for a long time, but it seems [impossible at the moment](https://github.com/flutter/flutter/blob/0b5d99eae6174b54ecca0a3fef6ba69228adc552/packages/flutter/lib/src/material/expansion_panel.dart#L505) to control the color of the entire header. They just execute `headerBuilder` and insert the result into the header. – Kirill Shashov Jun 27 '21 at 08:25

Gergő Csiszár · Answer 2 · 2022-11-26T09:40:59.897

5

ExpansionPanel has a property called backgroundColor. You can add any color to this, and it will looks like this: enter image description here

ExpansionPanel(
          backgroundColor: Colors.green,
          headerBuilder: (BuildContext context, bool isExpanded) {
            return const ListTile(
              title: Text("Quiz 0"),
            );
          },
          body: const ListTile(
            title: Text("body"),
          ),
          
        ),

edited Nov 26 '22 at 09:40

answered Sep 13 '21 at 08:45

Gergő Csiszár

107
1
6

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 13 '21 at 09:04

cindy · Answer 3 · 2018-10-10T19:16:19.970

anyone who is looking to change the expand_icon color -according to the update to expand_icon.dart If the panel is darker in color you can change the theme brightness to dark. This will change the icon color to white54. link - https://github.com/flutter/flutter/pull/21328/commits/56bc3b066fbfc331619c72b82c0f657000076514

void main() => runApp(new MaterialApp(
home: new HomePage(),
theme: new ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.blue,
    accentColor: Color(0xFF0277BD),
   textTheme: new TextTheme(
       body1:new TextStyle(color: Colors.white),
   ),
    ))

image - enter image description here

score 0 · Answer 4 · answered Apr 02 '22 at 00:45

0

I tried changing the dropdown arrow color with Brightness.dark as recommended above but it did not work for me. Weirdly this did: disabledColor: const Color(0xFF000000)

Yolo, I'm keeping it in till the next app update

answered Apr 02 '22 at 00:45

GraSim

3,830
1
29
35

How to add background color for ExpansionPanel in Flutter

4 Answers4