[flutter] setState 사용하지않고 스크롤시 bottom navigation bar 안보이게 하기

스크롤 내릴때 bottom navigation bar 보이지않고, 올릴때는 보이게 하고싶은데 setState를 사용하면 데이터가 많을 경우 

속도 측면에서 너무 비효율 적이라 setstate를 사용하지않고 기능을 수행하고 싶었다

 

그래서 찾은방법

 

HideNavbar class를 새로 생성해 이걸 이용할거다

class HideNavbar {
  final ScrollController controller = ScrollController();
  final ValueNotifier<bool> visible = ValueNotifier<bool>(true);

  HideNavbar() {
    visible.value = true;
    controller.addListener(
      () {
        if (controller.position.userScrollDirection ==
            ScrollDirection.reverse) {
          if (visible.value) {
            visible.value = false;
          }
        }

        if (controller.position.userScrollDirection ==
            ScrollDirection.forward) {
          if (!visible.value) {
            visible.value = true;
          }
        }
      },
    );
  }

  void dispose() {
    controller.dispose();
    visible.dispose();
  }
}

 

 

그리고 사용하고자 하는 class에 HideNavbar instance를 생성한다.

final HideNavbar hiding = HideNavbar();

이제 사용하고자하는 instance에 scroll controller 대신 hideNavbar에 있는 controller로 변경해준다

 

body: CustomScrollView(
          controller: hiding.controller,
          ...

 

이제 마지막으로 bottomNavigation bar 를 다음과 같이 선언해준다.

 

bottomNavigationBar: ValueListenableBuilder(
        valueListenable: hiding.visible,
        builder: (context, bool value, child) => AnimatedContainer(
          duration: Duration(milliseconds: 500),
          height: value ? kBottomNavigationBarHeight : 0.0,
          child: Wrap(
            children: <Widget>[
              BottomNavigationBar(
                type: BottomNavigationBarType.fixed,
                backgroundColor: Colors.blue,
                fixedColor: Colors.white,
                unselectedItemColor: Colors.white,
                items: const [
                  BottomNavigationBarItem(
                    icon: Icon(Icons.home),
                    title: Text('Home'),
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(Icons.card_giftcard),
                    title: Text('Offers'),
                  ),
                  BottomNavigationBarItem(
                    icon: Icon(Icons.account_box),
                    title: Text('Account'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),

 

set state를 사용하지 않고 navigation bar scroll  show hide 기능 만드는거 찾기 어려웠는데

드디어 찾았다ㅠㅠ 

다음엔 검색하는 시간 없이 바로 수행할 수있을듯!