{"id":371946,"date":"2023-03-29T09:01:09","date_gmt":"2023-03-29T09:01:09","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=371946"},"modified":"2023-12-22T06:41:55","modified_gmt":"2023-12-22T06:41:55","slug":"show-fab-while-scrolling-up-in-flutter","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/show-fab-while-scrolling-up-in-flutter\/","title":{"rendered":"Show FAB While Scrolling Up in Flutter."},"content":{"rendered":"\n

In this blog, we will implement how to show a Floating Action Button (FAB) while scrolling up in Flutter.<\/p>\n\n\n\n

This feature is displayed in the app as we scroll through a list view. This makes our Flutter application more interactive and user-friendly.<\/p>\n\n\n\n

You may also check our\u00a0Flutter app development services<\/a>.<\/p>\n\n\n\n

Let’s Start the code implementation. Import the following library.<\/p>\n\n\n\n

\n
\n
import 'package:flutter\/rendering.dart';<\/pre>\n<\/div>\n<\/div>\n\n\n\n
Creating Scroll View Screen with FAB button:<\/h2>\n\n\n\n
Step 1<\/strong>: Develop a stateful widget to create a custom floating action button that automatically hides and reveals scroll events.<\/p>\n\n\n\n
Step 2:<\/strong><\/p>\n\n\n\n
Design a screen with a floating action button and a scrolling display, such as a list view or grid view.<\/p>\n\n\n\n
import 'package:flutter\/material.dart';\n\nvoid main() {\n  runApp(const CustomFabButton());\n}\n\nclass CustomFabButton extends StatefulWidget {\n  const CustomFabButton({Key? key}) : super(key: key);\n\n  @override\n  State<CustomFabButton> createState() => _CustomFabButtonState();\n}\n\nclass _CustomFabButtonState extends State<CustomFabButton> {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      debugShowCheckedModeBanner: false,\n      home: Scaffold(\n        appBar: AppBar(title: Text("Custom FAB Example"),),\n          floatingActionButton: FloatingActionButton(\n              onPressed:(){} ,\n              backgroundColor:Colors.blue,\n              child:Icon(Icons.arrow_upward,color:Colors.white,),\n            ),\n        body: ListView.builder(\n            itemCount:50 ,\n            itemBuilder: (context,index)\n            {\n              return Card(\n                child:ListTile(\n                  title:Text("Item $index") ,\n                ) ,\n              );\n            }\n        ),\n      ),\n    );\n  }\n}<\/pre>\n\n\n\n
Step 3:<\/strong><\/p>\n\n\n\n
When the user scrolls up the screen, the floating action button app will now appear. The scroll view’s scrolling events need to be monitored. We must assign a unique scroll controller to the scroll view in order for it to hear the scrolling events.<\/p>\n\n\n\n
class _CustomFabButtonState extends State<CustomFabButton> {\n  ScrollController scrollViewController=ScrollController();\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      debugShowCheckedModeBanner: false,\n      home: Scaffold(\n        appBar: AppBar(title: Text("Custom FAB Example"),),\n          floatingActionButton: FloatingActionButton(\n              onPressed:(){\n                   } ,\n               backgroundColor:Colors.blue,\n              child:Icon(Icons.arrow_upward,color:Colors.white,),\n            ),\n        body: ListView.builder(\n           controller: scrollViewController,\n            itemCount:50 ,\n            itemBuilder: (context,index)\n            {\n              return Card(\n                child:ListTile(\n                  title:Text("Item $index") ,\n                ) ,\n              );\n            }\n        ),\n      ),\n    );\n  }\n}<\/pre>\n\n\n\n
Step 4:<\/strong><\/p>\n\n\n\n
To control the visibility of the FAB, you need to wrap it inside a Visibility widget. This will allow you to show or hide the FAB as needed.
To control when the visibility widget is shown or hidden, you need to create a Boolean variable called “isVisible”.<\/p>\n\n\n\n
 floatingActionButton: Visibility(\n            visible: isVisible,\n            child: FloatingActionButton(\n                onPressed:(){\n                    },\n                backgroundColor:Colors.blue,\n                child:Icon(Icons.arrow_upward,color:Colors.white,),\n              ),\n          ),<\/pre>\n\n\n\n
Step 5:<\/strong><\/p>\n\n\n\n
Add the Scroll Controller parameter to the CustomFab widget function to listen to widget scroll events.<\/p>\n\n\n\n
Add a callback to this scroll controller in the widget’s initState method.<\/p>\n\n\n\n
void initState() {\n    scrollViewController?.addListener((){\n    });\n      super.initState();\n  }<\/pre>\n\n\n\n

Now add a condition that when the user scrolls down, set isVisible to false and when the user scrolls up, name isVisible to true.<\/p>\n\n\n\n
To do this we use the control.position.userScrollDirection property of the controller. This will give the direction in which the user is scrolling (forward or backward).<\/p>\n\n\n\n
By adding a condition to the callback, we can show or hide the FAB and update the UI with setState. Clicking the button sends the content to the top.<\/p>\n\n\n\n
Complete code:<\/h2>\n\n\n\n
import 'package:flutter\/material.dart';\nimport 'package:flutter\/rendering.dart';\n\nvoid main() {\n  runApp(const CustomFabButton());\n}\n\nclass CustomFabButton extends StatefulWidget {\n  const CustomFabButton({Key? key}) : super(key: key);\n\n  @override\n  State<CustomFabButton> createState() => _CustomFabButtonState();\n}\n\nclass _CustomFabButtonState extends State<CustomFabButton> {\n  ScrollController scrollViewController = ScrollController();\n  bool isVisible = false;\n\n  @override\n  void initState() {\n    scrollViewController?.addListener(() {\n      if (scrollViewController?.position.userScrollDirection ==\n          ScrollDirection.reverse) {\n        if (isVisible == true) {\n          setState(() {\n            isVisible = false;\n          });\n        }\n      } else {\n        if (scrollViewController?.position.userScrollDirection ==\n            ScrollDirection.forward) {\n          if (isVisible == false) {\n            setState(() {\n              isVisible = true;\n            });\n          }\n        }\n      }\n    });\n    super.initState();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      debugShowCheckedModeBanner: false,\n      home: Scaffold(\n        appBar: AppBar(\n          title: Text("Custom FAB Example"),\n        ),\n        floatingActionButton: Visibility(\n          visible: isVisible,\n          child: FloatingActionButton(\n            onPressed: () {\n               scrollViewController.animateTo(\n                    scrollViewController.position.minScrollExtent,\n                    duration: const Duration(milliseconds: 200),\n                    curve: Curves.ease);\n                  },\n            backgroundColor: Colors.blue,\n            child: const Icon(\n              Icons.arrow_upward,\n              color: Colors.white,\n            ),\n          ),\n        ),\n        body: ListView.builder(\n            controller: scrollViewController,\n            itemCount: 50,\n            itemBuilder: (context, index) {\n              return Card(\n                child: ListTile(\n                  title: Text("Item $index"),\n                ),\n              );\n            }),\n      ),\n    );\n  }\n}<\/pre>\n\n\n\n
Output:<\/h2>\n\n\n\n
Upon scrolling up, FAB appears while it disappears while scrolling down in the list view. Attached video for reference.<\/p>\n\n\n