In this blog we will implement that How to show FAB while scrolling up in Flutter.
This feature is shown in the app while we are scrolling in a list view.So, this make our Flutter application more interactive and user friendly.
You may also check our flutter app development services.
Let’s Start the code implementation.Import the following library.
import 'package:flutter/rendering.dart';
Creating Scroll View Screen with FAB button:
Step 1: Create a custom floating action button now that will automatically hide and reveal depending on the scroll event. First, develop a stateful widget to accomplish this.
Step 2:
Make a screen with a floating action button and any scrolling display, such as a list view or grid view.
import 'package:flutter/material.dart';
void main() {
runApp(const CustomFabButton());
}
class CustomFabButton extends StatefulWidget {
const CustomFabButton({Key? key}) : super(key: key);
@override
State<CustomFabButton> createState() => _CustomFabButtonState();
}
class _CustomFabButtonState extends State<CustomFabButton> {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: Text("Custom FAB Example"),),
floatingActionButton: FloatingActionButton(
onPressed:(){} ,
backgroundColor:Colors.blue,
child:Icon(Icons.arrow_upward,color:Colors.white,),
),
body: ListView.builder(
itemCount:50 ,
itemBuilder: (context,index)
{
return Card(
child:ListTile(
title:Text("Item $index") ,
) ,
);
}
),
),
);
}
}
Step 3:
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.
class _CustomFabButtonState extends State<CustomFabButton> {
ScrollController scrollViewController=ScrollController();
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: Text("Custom FAB Example"),),
floatingActionButton: FloatingActionButton(
onPressed:(){
} ,
backgroundColor:Colors.blue,
child:Icon(Icons.arrow_upward,color:Colors.white,),
),
body: ListView.builder(
controller: scrollViewController,
itemCount:50 ,
itemBuilder: (context,index)
{
return Card(
child:ListTile(
title:Text("Item $index") ,
) ,
);
}
),
),
);
}
}
Step 4:
Wrap this FAB now inside a visibility widget to make it visible or invisible.
To regulate the visibility of the visibility widget, create the Boolean variable isVisible.
floatingActionButton: Visibility(
visible: isVisible,
child: FloatingActionButton(
onPressed:(){
},
backgroundColor:Colors.blue,
child:Icon(Icons.arrow_upward,color:Colors.white,),
),
),
Step 5:
Add the Scroll Controller parameter now to the CustomFab widget’s function. so that we may hear the widget’s scroll events.
Add a callback to this scroll controller in the widget’s initState method.
void initState() {
scrollViewController?.addListener((){
});
super.initState();
}
Now add a condition that when the user scrolls down, set isVisible to false and when the user scrolls up, name isVisible to true.
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).
Using this we add a condition to the callback to show/hide our FAB and update the UI by calling setState and on the click of button we send it to top.
Complete code:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(const CustomFabButton());
}
class CustomFabButton extends StatefulWidget {
const CustomFabButton({Key? key}) : super(key: key);
@override
State<CustomFabButton> createState() => _CustomFabButtonState();
}
class _CustomFabButtonState extends State<CustomFabButton> {
ScrollController scrollViewController = ScrollController();
bool isVisible = false;
@override
void initState() {
scrollViewController?.addListener(() {
if (scrollViewController?.position.userScrollDirection ==
ScrollDirection.reverse) {
if (isVisible == true) {
setState(() {
isVisible = false;
});
}
} else {
if (scrollViewController?.position.userScrollDirection ==
ScrollDirection.forward) {
if (isVisible == false) {
setState(() {
isVisible = true;
});
}
}
}
});
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Custom FAB Example"),
),
floatingActionButton: Visibility(
visible: isVisible,
child: FloatingActionButton(
onPressed: () {
scrollViewController.animateTo(
scrollViewController.position.minScrollExtent,
duration: const Duration(milliseconds: 200),
curve: Curves.ease);
},
backgroundColor: Colors.blue,
child: const Icon(
Icons.arrow_upward,
color: Colors.white,
),
),
),
body: ListView.builder(
controller: scrollViewController,
itemCount: 50,
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text("Item $index"),
),
);
}),
),
);
}
}
Output:
As you can see in the below attached video that FAB is shown while scrolling up and it is not visible while scrolling down in the list view.
Conclusion
We have done with our implementation of show FAB while scrolling up in Flutter.
Check here for more interesting blogs – https://mobikul.com/blog/
Hope this blog helped you to better understand the implementation of Show FAB while scrolling up in Flutter.
Thanks for reading this blog.
References
https://medium.com/@aakashpp/automatic-show-hide-fab-on-scroll-in-flutter-2c0abd94f3da
it entirely
Here is my web-site vince