CODEWITHSUNDEEP
flutter
Karthik Dhanya
Karthik Dhanya

Reputation: 201

Custom style or theme for Expansion Tile Header, Flutter

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?

Upvotes: 20

Views: 48609

Answers (7)

Daniela Rico
Daniela Rico

Reputation: 91

I found another way to do it. I don't know if this is the best way but it's simpler for me.

To change the ExpansionTile color, you can wrap it with a Container and give it a color. This will change the entire color of the ExpansionTile, both collapsed and expanded.

But if you want a different color for the children, you can also wrap them with a Container and set another color there. However, keep in mind that you have to "expand" that Container to occupy all the available space (you can do it by setting width and height parameters properly).

Btw, that doesn't change the arrow color.

Widget expansionTileTest(context) {
    return Container(
      color: Colors.grey,
      child: ExpansionTile(
        title: Text(
          "Title",
          style: TextStyle(color: Colors.black),
        ),
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height * 0.1,
            width: MediaQuery.of(context).size.width,
            color: Colors.yellow,
            child: Center(child: Text("Hi")),
          ),
        ],
      ),
    );
  }

Collapsed

Expanded

Upvotes: 9

user3185563
user3185563

Reputation: 1484

You can use the collapsedBackgroundColor property and the backgroundColor property, per the documentation here and here.

Upvotes: 4

Chinmay Relkar
Chinmay Relkar

Reputation: 473

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.

Upvotes: 34

bara batta
bara batta

Reputation: 1234

I used this code to make the trailing ion color Black.

 Theme(
      data: Theme.of(context).copyWith(accentColor: Colors.black),
      child: ExpansionTile(
        backgroundColor: Colors.white,
        title: Text(
          'Title Exmample',
          style: TextStyle(color: Colors.black),
        ),
        leading: CircleAvatar(
            backgroundColor: Colors.black.withOpacity(.07),
            child: Icon(
              Icons.apps_outlined,
              color: Theme.of(context).primaryColor,
            )),
        children: _buildTiles(Theme.of(context).primaryColor, Colors.black.withOpacity(.07), context),
      ),
    );

Upvotes: 4

Bryon Nicoson
Bryon Nicoson

Reputation: 943

If you want the ExpansionTile title to remain the same color whether closed or expanded, you can set it's style:

ExpansionTile(
  title: Text('HEADER HERE', style: TextStyle(color: Colors.red)),
  ...
),

Additional styling for ExpansionTile is an open feature request: Feature request: More styling of ExpansionTile #15427

Upvotes: 1

henrykodev
henrykodev

Reputation: 3084

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

Upvotes: 6

user3315892
user3315892

Reputation: 93

You can set color of header and then body/children wrap in Container and set color to that container.

Upvotes: 8

Related Questions