I need hide a CustomNavigationBarItem
using Controller
when scrolling down, and show again when scrolling up...
I tried to follow the steps of the below link Flutter show and hide container on scrolling ListView but I am trying to use the same Opacity
it just hide the bottom bar without scrolling..
and this is my below code:
import 'package:custom_navigation_bar/custom_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:petty/configuration/app_theme.dart';
import 'package:petty/screens/cart_screen.dart';
import 'package:petty/screens/categories_screen.dart';
import 'package:petty/screens/create_cart_screen.dart';
import 'package:petty/screens/dash_board_screen.dart';
import 'package:petty/screens/setting_screen.dart';
class IPetBNavigation extends StatefulWidget {
@override
_IPetBNavigationState createState() => _IPetBNavigationState();
}
class _IPetBNavigationState extends State<IPetBNavigation> {
int _currentIndex = 0;
ScrollController _hideButtonController;
var _isVisible;
@override
void initState() {
pageController = PageController(
initialPage: _currentIndex,
keepPage: true,
);
super.initState();
_isVisible = true;
_hideButtonController = new ScrollController();
_hideButtonController.addListener(() {
if (_hideButtonController.position.userScrollDirection ==
ScrollDirection.reverse) {
if (_isVisible)
setState(() {
_isVisible = false;
print("**** $_isVisible up");
});
}
if (_hideButtonController.position.userScrollDirection ==
ScrollDirection.forward) {
if (!_isVisible)
setState(() {
_isVisible = true;
print("**** $_isVisible down");
});
}
});
}
@override
Widget build(BuildContext context) {
return Stack(
children: [
buildPageView(),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: _buildBottomNavigationBar(),
),
],
);
}
Widget _buildBottomNavigationBar() {
return _buildBlurEffect();
}
PageController pageController;
final GlobalKey<FormFieldState<String>> orderFormKey = GlobalKey();
void pageChanged(int index) {
setState(() {
_currentIndex = index;
});
}
Widget buildPageView() {
return PageView(
key: orderFormKey,
controller: pageController,
onPageChanged: (index) {
pageChanged(index);
},
children: <Widget>[
// You just need to replace your pages with this Container
DashBoardScreen(),
IPetCatScreen(),
CreateCartScreen(),
CartScreen(),
IPetSettingsScreen(),
],
);
}
Widget _buildBlurEffect() {
return AnimatedContainer(
duration: Duration(milliseconds: 500),
height: _isVisible ? 90.0 : 0.0,
child: _isVisible
? CustomNavigationBar(
iconSize: 30.0,
selectedColor: Colors.white,
strokeColor: Colors.white12,
unSelectedColor: Colors.grey[600],
backgroundColor: AppTheme.nearlyBlack,
borderRadius: Radius.circular(20.0),
blurEffect: true,
opacity: 0.8,
items: [
CustomNavigationBarItem(
icon: FaIcon(
FontAwesomeIcons.paw,
),
),
CustomNavigationBarItem(
icon: FaIcon(
FontAwesomeIcons.filter,
),
),
CustomNavigationBarItem(
icon: FaIcon(
FontAwesomeIcons.heart,
),
),
CustomNavigationBarItem(
icon: FaIcon(
FontAwesomeIcons.shoppingBasket,
),
),
CustomNavigationBarItem(
icon: FaIcon(
FontAwesomeIcons.userAlt,
),
),
],
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
setState(() {
pageController.animateToPage(_currentIndex,
duration: Duration(milliseconds: 500),
curve: Curves.linear);
});
});
},
isFloating: true,
)
: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
),
);
}
}
I hope this could be clear enough..