DEV Community

loading...
Cover image for Flutter: How to scroll an ExpansionTile when it is expanded?

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

rageremix profile image HIMANSHU SHARMA ・3 min read

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:

Default ExpansionTile

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();
    //..
Enter fullscreen mode Exit fullscreen mode

And the onExpansionChanged property to check the expansion status.

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

        }
      },
    //..
Enter fullscreen mode Exit fullscreen mode

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 classv

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);
         }
      },
    //..
Enter fullscreen mode Exit fullscreen mode

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

Auto-scroll ExpansionTile

This article was originally posted at Medium, you can check it out there: Flutter: How to scroll an ExpansionTile when it is expanded?

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

Discussion

pic
Editor guide