0

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

Mahmoud Al-Haroon
  • 2,239
  • 7
  • 36
  • 72
  • 1
    I recomend you to go through this blog : https://medium.com/nonstopio/hide-or-show-app-bar-and-bottom-navigation-bar-while-scrolling-in-flutter-3994f78e52c0#:~:text=The%20listener%20is%20added%20to,hide%20the%20bottom%20navigation%20bar. – basudev nayak Jan 09 '21 at 15:13
  • @basudevnayak I am trying really to open medium site but it doesn't work in my country I think because it doesn't opens :(, you have another reference other than the medium one :) – Mahmoud Al-Haroon Jan 09 '21 at 15:16
  • 1
    @MahmoudHarooney https://stackoverflow.com/questions/50353640/hide-bottom-navigation-bar-on-scroll-in-flutter – Shubham Narkhede Jan 09 '21 at 15:21
  • @ShubhamNarkhede thanks for your support :), I gonna have a look :) – Mahmoud Al-Haroon Jan 09 '21 at 15:28

0 Answers0