[flutter] bottomNavigationBar / appBar

오늘은 앞으로 많은 앱에서 이용할 듯 한 위젯 bottomNavigationBar에 대해서 적어보려고 한다.
어플을 실행시켰을 때 많이 볼 수 있는 기본 틀(?)이라고 할 수 있는 두 가지가 상단의 appbar와 하단의 navigationBar이다.
먼저 appbar는 어플형태에서 많이 볼 수 있는 상단 bar를 의미한다.
해당 페이지가 어떤 페이지인지 알려주는 역할을 한다

카카오톡을 예시로 들면 이 곳이 appBar가 담당하는 부분일 것 같다.

flutter에서 appBar는 제공되는 위젯이 있다.

appBar: AppBar(
        backgroundColor: const Color.fromARGB(255, 255, 255, 255),
        elevation: 0,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              '난이도 설정',
              style: Theme.of(context).textTheme.titleLarge,
            ),
            TextButton(
              onPressed: () => Get.back(),
              style: const ButtonStyle(),
              child: Text(
                "x",
                style: textTheme.headlineSmall,
              ),
            ),
          ],
        ),
      ),

AppBar widget을 이용하게 되면 보다 간편하게 구현할 수 있다. 좌측 상단에 뒤로가기 버튼을 만들어 주지 않아도 기본 기능으로 구현되어있다.

---

이번 프로젝트에는 BottomNavigationBar 위젯을 이용하여 하단에 navigationBar를 추가해 봤다.

문제를 풀 수 있는 문제 탭, 문제 합불 통계를 확인할 수 있는 통계 탭, 그 밖에 메뉴들을 확인할 수 있는 더보기 탭을 만들었다.

final List<Widget> _widgetOptions = <Widget>[
    const CategoryView(),
    const ChartView(),
    const MoreView(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Obx(() {
        return _widgetOptions[controller.bottomNav.value];
      }),
      bottomNavigationBar: Obx(
        () {
          return BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: '문제',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.bar_chart),
                label: '통계',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.more_horiz_rounded),
                label: '더보기',
              ),
            ],
            onTap: (e) => {
              controller.bottomNav.value = e,
            },
            currentIndex: controller.bottomNav.value,
          );
        },
      ),
    );
  }

만들고 싶은 view 파일을 만들어주고 리스트화한 후 onTap을 통해 받아온 index값을 넘겨주어 페이지가 변화되는 구조이다.
BottomNavigationBarItem에 화면에 보여주고자 하는 아이콘과 라벨까지 넣어주면 완성 !
+ 깨알 포인트

이 옆에 아이콘 미리보기 되는거 너무 귀엽고 편하지 않나요..ㅎㅎㅎ

---

참고
https://www.youtube.com/watch?v=DVGYddFaLv0