Flutter ExpansionTile trailing icon: how to change depending on whether tile is expanded or collapsed

Question

I would like my ExpandedTile to have the default arrow when it's expanded but show something else when it's collapsed (namely a number that the user has chosen from a list of options shown when it's expanded; the number is stored in a variable called int _selectedNumber .

Is there a way to easily make the trailing property of the ExpandedTile dependent on the tile state (ie collapsed or expanded)?

Short example:

ExpansionTile(
   title: Text('Some title'), 
   trailing: // if the tile is expanded -> null; if it's collapsed -> Text(_selectedNumber.toString())
);

PS This is my first ever question so please let me know if anything is unclear in my question!

Answer 1

You can use ternary operator with null value to use the default arrow.

Something like this:

var isExpanded = false;

...

ExpansionTile(
      title: const Text('Some title'),
      subtitle: const Text('Some subtitle'),
      // null if expanded, will using default arrow
      trailing: isExpanded? null: Text("Other"),
      children: const <Widget>[
        ListTile(title: Text('This is item')),
      ],
      onExpansionChanged: (bool expanded) {
        setState(() => isExpanded = expanded);
      },
    ),