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.
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.
Create methods to hide and show the floating action button
Whenever the user scrolls forward (Up) we should have to hide the Floating button, so hideFloationButton() will calls. As well as whenever the user scrolls revers (down) we should have to show the Floating action button, so showFloationButton() will calls. Inside both methods, we are changing the value of the _show variable. Since the Floating action buttons visibility depends on the _show variable we are changing the value of it.
Implement the method to handle the scroll
Inside this function, we are adding the scroll listener, So that when the scroll occurs the function will trigger. Moreover, This is the main operation which fulfill our requirement. Which hide and show the floating action button in the scroll. When the user scroll reverse direction we are calling the hideFloationButton() so the floating action button will disappear. and also when the user scrolls forward we are calling the showFloationButton(), so the floating action button will appear.
Build the widget
Inside the Listview, or Listview.builder we should have to set the controller object. And also for the Floating action button, we are wrapping the button with a visibility widget and we should have to set the visible attribute to _show. So when the user scrolls up or down, as to the scroll the trigger will occur and updates the _show variable while calling the setState() method. So that as to the variable value, the floating action button will appear or disappear.
Finally here is the source code for the tutorial, and also you can download a sample application which used the advantage of this tutorial.