[Flutter] 하단 커스텀 애니메이션 네비게이션바 적용 및 배포

최근에 토이프로젝트로 진행중이던 작업물 중에서 나혼자 쓰기가 아까워 pub.dev 에 게시를 하여 모두와 함께 쓸수있는

하단 네비게이션바를 개발했다.

 

작동화면 먼저 보여주고 적용에 대한 설명을 진행하도록 하겠다.

이와 같이 하단 NavigationBar를 사용하는 대신 내가 원하는 쬐깐한 위젯을 사용하도록 한다.

 

아래 주소는 내가 직접 게시해둔 패키지이고

가장 최신 것으로 dependency에 추가하여 적용하도록 한다.

https://pub.dev/packages/flutter_bottom_floating_bar

flutter_bottom_floating_bar | Flutter Package

 

사용방법은 간단하다.

BottomNavigationBar의 소스를 참고하여 만들었기 때문에 코드내용도 비슷한 편이다.

 

 FloatingNavigationBar(
                  items: [
                    FloatingNavigationItem(icon: Icons.home),
                    FloatingNavigationItem(icon: Icons.menu),
                    FloatingNavigationItem(icon: Icons.person),
                  ],
                  onTap: (index) {
                    print(index.toString());
                  },
                )

 

Scaffold 옵션내에서 bottomNavigationBar: 옵션에 붙혀도 되고

Stack을 통해 원하는 위치에 직접 배치를 해도 된다.

추가로 backgroundColor 나 borderRaidus등 기본 옵션들의 대한 수정도 가능하니 원하는 대로 커스터마이징을 해보길 바란다.

 

#버그 문의나 개선점 제안 등 언제나 댓글 또는 이메일로 환영합니다!

email : jwkim6462@gmail.com