Scrollable Item in Flutter

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store