Custom Navigation Bar in Flutter

🎨 What I Designed

https://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/02/09.dart

flutter_ui_lab/lib/2025/02/09.dart at main · suojae/flutter_ui_lab

---

🔎  How I Made It

1. ValueNotifier를 통해 사용자의 탭을 감지하여 페이지를 이동하고 있다.
2. FloatingActionButton은 위치를 따로 지정해주고 있다.
3. BottomNavigationBar는 Stack을 활용해 상단 곡선을 그리고 덮어씌워주고 있다.

 

01. ValueNotifier<int>를 활용한 상태 관리

- ValueNotifier는 단일 값의 변화를 감지하는 클래스이다.

- value가 변경되었을 때만 addListener()가 실행된다.

- 같은 값으로 설정하면(== 비교 시 true) 리스너가 실행되지 않는다.

 

💡 주의점!!

- ValueNotifier에서 상태변화를 감지하고 싶다면 불변타입을 넣어줘야한다!

- ValueNotifier는 기본적으로 메모리 주소를 비교한다!

- 예를들어 리스트를 넣고 리스트를 인메모리로 수정하면 값 변경 반영이 안된다

- 만약 참조하는 메모리의 값 변경까지 반영하고 싶으면 ChangeNotifier클래스를 확장해서 사용! 하라고 공식문서에 나와있다 :)

 

 

02. FloatingActionButton의  위치지정

https://api.flutter.dev/flutter/material/FloatingActionButtonLocation-class.html

FloatingActionButtonLocation class - material library - Dart API

(위 공식문서에서 이미지로 엄청 잘 설명해줘서 위 링크로 보는게 더 이해하기 빠를 수 있다)

 

FloatingButton은 Scaffold내에서 아래 옵션을 통해 위치를 따로 지정해줄 수 있다.

endFloat (기본값)	오른쪽 하단 (기본 위치)
centerFloat	중앙 하단 (스크린 중앙)
startFloat	왼쪽 하단
centerDocked	하단 중앙 (BottomAppBar와 결합 시)
endDocked	오른쪽 하단 (BottomAppBar와 결합 시)
startDocked	왼쪽 하단 (BottomAppBar와 결합 시)

 

 

03. Stack을 활용한 BottomNavigationBar 커스터마이징하기