Scrollable Item in Flutter

Agnel Selvan
2 min readApr 5, 2022

--

In this blog, we will be looking at how to automatically scroll to a selectedIndex in Flutter using ScrollController. Let’s get started🚀.

Variables

Defined all the required variables so that we can scroll dynamically.

I'm using Row wrapped inside SingleChildScrollView and added the scroll direction as horizontal and added ScrollController. You can use ListView too for this example now if you run your program.

Here you can clearly see the selectedIndex is not highlighted instead we need to scroll to check the selectedIndex to avoid this we need to add the scroll left and scroll right functions to scroll dynamically based on the selectedIndex.

Scroll Dynamically

This is just a simple Calculation behind the scene to scroll dynamically.

Now add those functions in that IconButton accordingly and run your app.

Check the whole code here

Do you know you can press the clap👏 button 50 times? The higher you go, the more it motivates me to write more stuff.
Hello, I am Agnel Selvan. A noob developer. You can find me on Linkedin or stalk me on GitHub.

--

--

Agnel Selvan

A person who is learning Flutter Development, Shaders, OpenGL, and Augmented Reality.