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

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

CodePudding user response：

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

Please accept the solution if solved your problem

CodePudding user response：

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;