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!
1
-
1Just copy the ExpansionTile source code from github.com/flutter/flutter/blob/… and edit it as you want and make your custom ExpansionTile!!Yash– Yash2018-09-13 11:29:57 +00:00Commented Sep 13, 2018 at 11:29
Add a comment
|
3 Answers
From the source of ExpansionTile
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.
answered Sep 13, 2018 at 5:08
Günter Zöchbauer
661k235 gold badges2.1k silver badges1.6k bronze badges
2 Comments
Mahesh Jamdade
@GunterZochbauer is editing a source code a better practice?I had a similar question and I looked at the expansion tile source code and the borders were being applied when the tile was expanded I simply commented that piece of code because I don't need them and it worked for me, should that be done or is it a bad practice?
Günter Zöchbauer
@maheshmnj If you change the code in
~/.pub-cache/... or somewhere inside ~/.flutter/... you won't have much fun with Flutter - no fun at all - don't do that, like ever. Changes in that directory might get lost at any time. If you copy the source into your own project then the maintenance burden is on you, because when the Flutter team makes changes you won't even get notified and your code might become stale. If the widget just doesn't allow any other way to customize its behavior to your needs (as in above example at that time) then copying might be the lesser burden.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(...));
1 Comment
NonCreature0714
This answer is too brief and does not provide a sufficient explanation of how it solves the OP's question.
comment out
// border: Border(
// top: BorderSide(color: borderSideColor),
// bottom: BorderSide(color: borderSideColor),
// ),
from expansion_tile.dart
1 Comment
Mahesh Jamdade
This is not a good practice as when the flutter team updates their code it would get overwritten please read the comment above from @GunterZochbauer