플러터/플러터 개발

[플러터 개발] BottomNavigationBar 직접 만들어보기

안녕하세요. 오늘은 BottomNavigationBar를 커스텀하는 걸 배워보겠습니다.

플러터에는 BottomNavigationBar라는 클래스가 있습니다. 하지만 오늘은 기존 클래스를 사용하지 않고 Container와 TabBar를 이용해 직접 바텀바를 만들어보려고 합니다.

그렇다면, "왜 기존에 있는 클래스를 사용하지 않고 직접 BottomBar를 만들어야할까?" 라는 생각이 드실 수도 있습니다. BottomBar를 직접 TabBar로 구현하는 이유는 조금 더 다양하게 커스터마이징하기 위해서 직접 구현하는 겁니다. 나중에 외주를 받거나, 혹은 특별한 경우에는 BottomBar에 더 많은 기능과 디자인을 요구하는 경우가 있습니다. 그렇기 때문에 BottomBar를 직접 구현하는 방법도 알아야 합니다!

저는 실제로 개발을 할때, 이렇게 직접 구현하는 경우가 많았습니다!

그럼 이제 실제로 만들어보며 배워보겠습니다.

bottom_bar.dart (Widget)

실제 바텀바를 꾸미는 코드입니다.

import 'package:flutter/material.dart';

class BottomBar extends StatelessWidget {
  const BottomBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(bottom: 10, top: 5),
      height: 88, //BottomBar의 높이
      decoration: BoxDecoration(
        color: Colors.white, //BottomBar 색상
        boxShadow: [BoxShadow(blurRadius: 1, color: Colors.grey)], //BottomBar와 화면을 구분하는 그림자
      ),
      child: TabBar(
        tabs: [
          //BottomBar 아이콘 리스트 (페이지와 똑같은 순서로)
          Tab(icon: Icon(Icons.home, size: 28), text: '홈'),
          Tab(icon: Icon(Icons.account_balance_wallet, size: 28), text: '내 지갑'),
          Tab(icon: Icon(Icons.settings, size: 28), text: '설정'),
        ],
        labelColor: Color(0xffFF4156), //선택된 메뉴 색상
        unselectedLabelColor: Colors.grey, //선택되지 않은 메뉴 색상
        labelStyle: TextStyle(fontSize: 16), //메뉴 글씨 스타일 설정
        indicatorColor: Colors.transparent, //인디케이터 없애기
      ),
    );
  }
}

bottom_bar_screen.dart (screen)

바텀바 위젯을 가져와서 배치하고, 연결되는 페이지들을 설정하는 화면입니다. 실제로 바텀바가 있는 메뉴화면으로 들어가기 위해서는 이 화면으로 이동하면 됩니다.

import 'package:flutter/material.dart';

import 'bottom_bar.dart';

class BottomBarScreen extends StatelessWidget {
  const BottomBarScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3, //페이지 수
      child: Scaffold(
        body: TabBarView(
          physics: NeverScrollableScrollPhysics(),
          children: [
            //페이지 리스트
            SafeArea(child: Text('마이 스크린1', style: TextStyle(fontSize: 40))),
            SafeArea(child: Text('마이 스크린2', style: TextStyle(fontSize: 40))),
            SafeArea(child: Text('마이 스크린3', style: TextStyle(fontSize: 40))),
          ],
        ),
        bottomNavigationBar: BottomBar(), // 커스텀 바텀바
      ),
    );
  }
}