Flutter Expansion Tile -- Header Color Change, and Trailing Animated Arrow Color Change
If you check the source code of the ExpansionTitle , you will notice that the header item is a ListTile , so you can't change the background because it hasn't a parent with a color property. I modified a little the class to support what you need.
Add this file to your project: https://gist.github.com/diegoveloper/02424eebd4d6e06ae649b31e4ebcf53c
And import like this way to avoid conflicts because the same name.
import 'package:nameofyourapp/custom_expansion_tile.dart' as custom;
I put an alias 'custom' but you can change for any alias.
Usage:
custom.ExpansionTile(
headerBackgroundColor: Colors.black,
iconColor: Colors.white,
title: Container(
...
Remember, Flutter has a lot of Widgets out of the box, but If any of them don't fit what you need, you'll have to check the source code and create your own widget.
In my opinion, the more preferable way is wrap It with a new Theme
, so It could work as expected:
Theme(
data: Theme.of(context).copyWith(accentColor: ColorPalette.fontColor, unselectedWidgetColor: ColorPalette.fontColor..withOpacity(0.8)),
child: ListView(
children: <Widget>[
ExpansionTile(
title: Text("Padding"),
children: <Widget>[
Text("Left"),
Text("Top"),
Text("Right"),
Text("Bottom"),
],
)
],
),
)
Instead of copy a full class to customize, check the source code, you could find more Theme
attribute to override.
_borderColorTween
..end = theme.dividerColor;
_headerColorTween
..begin = theme.textTheme.subhead.color
..end = theme.accentColor;
_iconColorTween
..begin = theme.unselectedWidgetColor
..end = theme.accentColor;
_backgroundColorTween
..end = widget.backgroundColor;
If you want a more animatable widget or something, I would recommend diegoveloper's answer. Otherwise, just wrap It with Theme
, so you won't need to maintain the Component, and get native flutter component.
I think better this solution more than custom list tile .
Widget customTheme(Widget child, BuildContext context) => Theme(
data: Theme.of(context).copyWith(
dividerColor: Colors.transparent,
dividerTheme: DividerThemeData(
color: Theme.of(context).colorScheme.background)),
child: child,
);
Code Gist