Flutter: Custom ExpansionTile

user_9972036 0
Viewed 20063

Is it possible to alter the expansion tile in flutter? Specifically I want to remove the dividers it creates when it expands. Also I want to adjust its padding. Is that possible? Thanks!

dart flutter
3 Answers

From the source of ExpansionTile

https://github.com/flutter/flutter/blob/d927c9331005f81157fa39dff7b5dab415ad330b/packages/flutter/lib/src/material/expansion_tile.dart#L176-L184

  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    _borderColor.end = theme.dividerColor;
    _headerColor
      ..begin = theme.textTheme.subhead.color
      ..end = theme.accentColor;
    _iconColor
      ..begin = theme.unselectedWidgetColor
      ..end = theme.accentColor;
    _backgroundColor.end = widget.backgroundColor;

you can derive what you can influence by wrapping the element in a Theme for example by modifying dividerColor

_borderColor.end = theme.dividerColor;

final theme = Theme.of(context).copyWith(dividerColor: Colors.yellow);
return Theme(data: theme, child: ExpansionTile(...));

similar with _headerColor, _iconColor, _backgroundColor. If you need more customization, you can always copy the source and customize it to your liking.

user_2174080

For remove dividers simply warp with Theme widget and make divider color transparent.

final theme = Theme.of(context).copyWith(dividerColor: Colors.transparent);
return Theme(data: theme, child: ExpansionTile(...));
user_108349840

comment out

//        border: Border(
//          top: BorderSide(color: borderSideColor),
//          bottom: BorderSide(color: borderSideColor),
//        ),

from expansion_tile.dart

user_76941940
Related