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