Flutter: How to scroll an ExpansionTile when it is expanded?

Hi, in this article, I’ll focus on ExpansionTile and how you can use it in your app or web app. If you are not familiar with ExpansionTile, you can check my previous article on it:

Flutter: Expansion/Collapse view

Let’s begin!

So, I need a way to scroll my ExpansionTile up automatically so that the user doesn’t have to do it manually to see its content.

Currently, I have to manually scroll up:

For the above example, I have used ListView(without any constraints) that will contain the ExpansionTiles.

To automate the process of the scroll in ExpansionTile, I need to know:

1. How much I need to scroll after expansion?

In this particular case, I do not know how many pixels the ExpansionTile height will take or what will be its context after expansion. So, we can use a GlobalKey and then check its current context at runtime to make it visible later.

I’ll use the key property to get the current context of the ExpansionTile.

//..
final GlobalKey expansionTileKey = GlobalKey();
//..

And the onExpansionChanged property to check the expansion status.

//..
  key: expansionTileKey,
  onExpansionChanged: (value) {
    if (value) { // Checking expansion status
    }
  },
//..

2. How to scroll after getting the context?

I will use Scrollable widget to make the current context visible after expansion. As the name suggests, it is a widget that scrolls.

Scrollable class

I created a private function _scrollToSelectedContent which will receive the key and scroll the widget with a duration:

Here, I am checking whether the current context is null. If it isn’t, I delayed the Scrollable widget. The ExpansionTile’s expansion animation takes 200ms to show the content, as shown in its definition: const Duration _kExpand = Duration(milliseconds: 200); therefore it is a good idea to wait for expansion animation to finish before starting scrolling so you can get the updated context.

You can also add the curve and alignment to the way of the scroll.

Now I will call this function within the onExpansionChanged property and pass the key:

//..
  key: expansionTileKey,
  onExpansionChanged: (value) {
     if (value) {
       _scrollToSelectedContent(expansionTileKey: expansionTileKey);
     }
  },
//..

And I am done! After this, my ExpansionTile will auto-scroll to display its content:

Thank you for reading, if you enjoyed the article make sure to give a clap (👏)! You can connect with me on Twitter, LinkedIn and find some of my work on GitHub and Codepen. And for more such articles you can support me by buying me a coffee

Buy me a coffee for more articles

If you liked this article, here are some other articles you may enjoy:

Flutter: Firebase GitHub Authentication

Flutter: Sharing files using share package

How to create Card Carousel in Flutter?

Reference:

How to scroll an ExpansionTile / Listview when a tile is expanded?

Follow Flutter Community on Twitter for everything happening in the 🌎 of Flutter: https://www.twitter.com/FlutterComm