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(),
  ),
);

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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(
                ...