Custom style or theme for Expansion Tile Header, Flutter

Question

Is there any way to apply custom theme for ExpansionTile. In my case, I want to have the different background colour for Header and children of the expansion tile but When ever the ExpansionTile is expanded, Headers background color changes to that of children?

Answer 1

To apply a custom Theme to any widget, just wrap it with the Theme() widget. and then specify your custom theme in the data field of the widget.

Theme(
    data: ThemeData(/*specify your custom theme here*/),
    child: ExpansionTile() /*or any other widget you want to apply the theme to.*/
)

In your case, to customise the header in ExpansionTile,

when ExpansionTile is closed

• the style of header text i.e. title depends on ThemeData.textTheme.subhead (in flutter 2 it's ThemeData.textTheme.subtitle1)
• whereas, the style of the arrow icon depends on ThemeData.unselectedWidget (in flutter 2 it's ThemeData.unselectedWidgetColor)

when ExpansionTile is open

• the color of both the widgets depends on ThemeData.accentColor

In a similar fashion you can customise almost any part of the expansion tile by tweaking the theme. For more details check out this link.

Since flutter is built with flexibility in mind. You can do almost anything you want. Create almost any UI you want.

Answer 2

Following the idea of @user3315892, you can implement your own stateful widget for the ExpansionTile, so that you can control what colours you want the header and children to be when the header is expanded or collapsed.

The following example only changes the text foreground and background colours of the header when the expansion tile is expanded or collapsed, but you can do the same for the children widgets.

class CustomExpansionTile extends StatefulWidget {
  @override
  State createState() => CustomExpansionTileState();
}

class CustomExpansionTileState extends State<CustomExpansionTile> {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return ExpansionTile(
      title: Container(
        child: Text(
          "HEADER HERE",
          style: TextStyle(
            color: isExpanded ? Colors.pink : Colors.teal,
          ),
        ),
        // Change header (which is a Container widget in this case) background colour here.
        color: isExpanded ? Colors.orange : Colors.green,
      ),
      leading: Icon(
        Icons.face,
        size: 36.0,
      ),
      children: <Widget>[
        Text("Child Widget One"),
        Text("Child Widget Two"),
      ],
      onExpansionChanged: (bool expanding) => setState(() => this.isExpanded = expanding),
    );
  }
}