I have an ExpansionTile within my Drawer widget. When I expand this item, it automatically adds a divider line above and below. I want these divider lines permanently.
So I'd either like to know how to show the ExpansionTile's divider lines always (expanded and unexpanded), or I can add my own divider lines and tell the ExpansionTile to never show divider lines.
Is this possible? Thanks.
you can hide divider lines by wrapping the ExpansionTile widget in Theme Widget,
your code will look like this after you add Theme widget
Theme(
data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
child:ExpansionTile(
title:...,
children:[],
),
),
check this Github Issue
dividerTheme: DividerThemeData( color: Colors.transparent,) did not work.Another option is that instead of wrapping the ExpansionTile widget with Theme, you can pass the shape directly to ExpansionTile as follows:
ExpansionTile(
// ...
shape: Border(),
)
collapsedShape: Border(), inside ExpansionTileThemeData
Be aware that while the solution
ExpansionTile(
// ...
shape: Border(),
)
succeeds in removing the borders, it leads to the title widget (and icons) to wiggle/slightly move upwards on expanding. This is because the layout is designed with the expectation that a border with minimal height is added in the expanded stage above the title widget (which we remove with the approach above). This does not happen in the other solution:
Theme(
data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
child:ExpansionTile(
title:...,
children:[],
),
),
@RJB, I had the same issue, I resolved wrapping the ExpansionTile with a column, like this:
Theme(
data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
child: Column(
children: [
ExpansionTile(
title: Text(
'My title',
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
trailing: Icon(
_showContent
? Icons.expand_less_rounded
: Icons.expand_more_rounded,
),
onExpansionChanged: (bool expanded) {
setState(() => _showContent = expanded);
},
children: <Widget>[
Text('My content'),
],
),
const Divider(
color: Colors.amber,
thickness: 1,
height: 0,
)
],
),
);
I know it isn't pretty, but I could't find an Expansion component that I could personalize every aspect of its appearance.
Using only shape is not enough to prevent the title from moving, both shape and collapsedShape must be provided.
ExpansionTile(
shape: LinearBorder.none,
collapsedShape: LinearBorder.none,
...
Don't override theme
the first solution is must be use own widget interface. Overriding theme is not a good solution at all. You must handle border settings through ExpansionTile interface.
ExpansionTile(
shape: LinearBorder.none,
...
