Question 77638 in Flutter Question posted in
The official Flutter documentation can be found here.

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search