flutter - How to hide a bottom bar widget using Controller when scrolling down

Question

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..

question from:https://stackoverflow.com/questions/65644179/how-to-hide-a-bottom-bar-widget-using-controller-when-scrolling-down

Answer 1

Waitting for answers