how do i hide the bottom nav bar? - flutter

Question

Using persistent_bottom_nav_bar: ^5.0.2, how do I detect that the user is scrolling on a list views of items on connection_view.dart page from bottom_nav_bar.dart page? So if it detects, I want the bottom_nav_bar to be hidden when user scrolls down.
bottom_nav_bar.dart, my bottom navigation bar
Widget build(BuildContext context) {
return Sizer(builder: ((context, orientation, deviceType) {
return Scaffold(
body: PersistentTabView(context,
screens: const [
ClientConnection(),
ClientDiscover(),
ClientDiscover(),
ClientDiscover()
],
items: _navBarsItems(),
navBarStyle: NavBarStyle.style1,
bottomScreenMargin: 0,
navBarHeight: 60,
padding: const NavBarPadding.all(5),
margin: const EdgeInsets.only(
bottom: 15,
left: 20,
right: 20,
),
decoration: NavBarDecoration(
borderRadius: BorderRadius.circular(30),
boxShadow: const [
BoxShadow(
color: Colors.grey,
blurRadius: 5,
offset: Offset(2, 2))
])),
List<PersistentBottomNavBarItem> _navBarsItems() {
return [
PersistentBottomNavBarItem(
icon: SvgPicture.asset(
'assets/active-connection-icon.svg',
width: 5.w,
),
title: ("CONNECTIONS"),
inactiveIcon: SvgPicture.asset(
'assets/inactive-connection-icon.svg',
width: 5.w,
),
),
PersistentBottomNavBarItem(
icon: SvgPicture.asset(
'assets/active-discover-icon.svg',
width: 5.w,
),
title: ("DISCOVER"),
inactiveIcon: SvgPicture.asset(
'assets/inactive-discover-icon.svg',
width: 5.w,
),
),
PersistentBottomNavBarItem(
icon: SvgPicture.asset(
'assets/active-profile-icon.svg',
width: 5.w,
),
title: ("PROFILE"),
inactiveIcon: SvgPicture.asset(
'assets/inactive-profile-icon.svg',
width: 5.w,
),
),
PersistentBottomNavBarItem(
icon: SvgPicture.asset(
'assets/active-notification-icon.svg',
width: 5.w,
),
title: ("NOTIFICATIONS"),
inactiveIcon: SvgPicture.asset(
'assets/inactive-notification-icon.svg',
width: 5.w,
),
),
connection_view.dart,my list view of items
Widget build(BuildContext context) {
return Sizer(builder: ((context, orientation, deviceType) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
toolbarHeight: 10.h,
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Connections',
style: TextStyle(color: Colors.black),
),
SizedBox(
width: 2.w,
),
Container(
width: 10.w,
height: 6.h,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.blue,
),
),
],
),
),
body: ListView.builder(
controller: _scrollController,
physics: ClampingScrollPhysics(),
itemBuilder: (_, i) => ListTile(title: Text('Item $i')),
itemCount: 20,
),
);
}));

Answer 1

You need two things: listen to scrolling events and update the visibility of your app bar accordingly.
To do that you will need a StatefulWidget which contains the app bar as well, create two members in the state class to track scrolling direction and app bar visibility:
bool _showAppBar = true;
bool _isScrollingDown = false;
Wrap the app bar into a Visibility widget depending on the _showAppBar member:
...
Visibility(visible: _showAppBar, child: YourBottomNavBarWidgetHere()),
...
Register the listener to detect scrolling direction and update the visibility. I suggest using initState and dispose methods:
#override
void initState() {
super.initState();
_scrollController.addListener(_scrollListener);
}
#override
void dispose() {
_scrollController.removeListener(_scrollListener);
super.dispose();
}
scrollListener() {
if (_scrollController.position.userScrollDirection ==
ScrollDirection.reverse && !_isScrollingDown) {
_isScrollingDown = true;
setState(() {
_showAppBar = false;
});
}
else if (_scrollController.position.userScrollDirection ==
ScrollDirection.forward && _isScrollingDown) {
_isScrollingDown = false;
setState(() {
_showAppBar = true;
});
}
}
Alternatively, you can use an AnimatedContainer instead of Visibility. This way the app bar will be hidden and shown animated:
AnimatedContainer(
height: _showAppBar ? kToolbarHeight : 0.0,
duration: const Duration(milliseconds: 300),
child: YourBottomNavBarWidgetHere()),