CODEWITHSUNDEEP
flutter
Khalid
Khalid

Reputation: 171

hide floatingActionButton when scroll down and show it back when scroll up flutter

im trying to find way to hide the floatingActionButton when scroll down and show it back when scroll up

i'm using getx

Thanks in advance

enter image description here

Upvotes: 1

Views: 1090

Answers (3)

Nishanth Mekala
Nishanth Mekala

Reputation: 178

You can make custom fab with scroll controller which is explained well in the below artile.

https://medium.com/@aakashpp/automatic-show-hide-fab-on-scroll-in-flutter-2c0abd94f3da

Upvotes: 2

Reza Farjam
Reza Farjam

Reputation: 1140

The accepted answer and the referenced Medium article suggest a bad practice—using the Visibility widget to control the Floating Action Button (FAB) visibility. This approach removes the default FAB in/out animations.

A better solution is to control the visibility by assigning or removing the FAB from the Scaffold's floatingActionButton parameter, like this:

Scaffold(
  floatingActionButton: isFabVisible ? MyFabWidget() : null,
  body: ...
)

This preserves the default smooth animation, as shown in the GIF below:

A GIF to demonstrate the point

You can also check out this YouTube tutorial for more details.

Upvotes: 1

Marwan Aladwan
Marwan Aladwan

Reputation: 78

1- Wrap your FloatingActionButton in a Visibility widget. This allows you to toggle the visibility of the FloatingActionButton based on a boolean value

Visibility(
  visible: _isVisible, // boolean value that controls visibility
  child: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);

2- Then Create a ScrollController and attach it to a ListView. This allows you to listen for changes in the scroll position.

final ScrollController _scrollController = ScrollController();
//...
ListView.builder(
    controller: _scrollController,
    //...
);

3- Use the addListener method on the ScrollController to listen for changes in the scroll position and update the visibility of the FloatingActionButton accordingly.

_scrollController.addListener(() {
  if (_scrollController.offset > _scrollController.position.maxScrollExtent && _isVisible) {
    setState(() {
      _isVisible = false;
    });
  } else if (_scrollController.offset <= _scrollController.position.minScrollExtent && !_isVisible) {
    setState(() {
      _isVisible = true;

Upvotes: 4

Related Questions