Flutter Expansion Tile -- Header Color Change, and Trailing Animated Arrow Color Change

Question

I have used the Expansion Tile to generate a Expansion List View. I'm facing some customization issues in Expansion Tile Header.

Below is my code.

ExpansionTile(           
    title: Container(
        child: Text(
            getCategory(i),
            style: TextStyle(
            color: Colors.white,
            ),
        ),
        color: Colors.black
    ),

    children: <Widget>[
        new Container(
            height: 60.0,
            margin: const EdgeInsets.only(top:10.0, left: 10.0, right:10.0, bottom: 10.0),
            decoration: BoxDecoration(                    
            color: Colors.blue,
            borderRadius: new BorderRadius.all(  Radius.circular(5.0) ),
            ),
        ),
        new Container(
            height: 60.0,
            margin: const EdgeInsets.only(top:10.0, left: 10.0, right:10.0, bottom: 0.0),
            decoration: BoxDecoration(                    
            color: Colors.green,
            borderRadius: new BorderRadius.all(  Radius.circular(5.0) ),
            ),
        )
    ],
    backgroundColor: Colors.white,
)

I'm getting below result.

What I'm expecting to have is below.

If anyone know a workaround to customize the header color, please advice.

Answer 1

A much easier way than all of those suggested is to wrap your ExpansionTile in a ListTileTheme.

Once you do this, you can change the backgroundColor to whatever you'd like. In my case, I've done the same thing with the ListTiles inside of the ExpansionTile so that the header can have one color and the children can have another color.

return ListTileTheme(
                  tileColor: Colors.grey.shade300,
                  child: ExpansionTile(
                    leading: Padding(
                      padding: const EdgeInsets.only(top:4.0),
                      child: Text('Outer Tile'),
                    ),
                    title: null,
                    children: [
                      Slidable(
                        actionPane: SlidableDrawerActionPane(),
                        child: ListTileTheme(
                          tileColor: Colors.white,
                          child: ListTile(
                            title: Text('Inner Tile'),
                            subtitle: Text('subtitle'),
                            leading: FlutterLogo(),
                          ),
                        ),
                      )
                    ],
                  ),
                );

I think this is easier than digging through the docs to find which Theme elements correspond to individual ListTile parameters.