How to remove the divider lines of an ExpansionTile when expanded in Flutter

user_13247321 0
Viewed 10332

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.

flutter
2 Answers

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

user_95297560

@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.

user_15207940
Related