Hide or Show Floating button on Scroll in Flutter

Flutter is wonderful for creating complex User Interfaces however you should know User Experiences to identify which occur whenever the user does something in the application.

From this tutorial, I’ll show you how we can show or hide the floating action button while scrolling. The final result of our tutorial will look as follows.

Final Result

So let’s start,

Initialize required variables State object /class:

Call initState() method

This method calls at the beginning when the widget is created. The framework will call this method exactly once for each State object it creates. So the initState() is the best place to implement the behaviors which should occur before widget build. So in the initState() method, I implement handleScroll() function which is responsible for updating the isScrollingDown variable whenever the user scrolls the listview in the reverse(down) direction.

Call dispose() method

This method calls when the state object removed permanently which means the dispose() method will call by the framework when the state object will never build again. So when after calling the dispose() method, we are not having the ability to call setState() methods again. So this is the better place to remove the scroll Listener. Put the dispose() methods after the initState() method.