[Flutter] Bottom Navigation Bar

 

 

오늘은 앱 안에서 화면이동 시 가장 많이 사용되는 bottom navigation bar를 만들어 보겠다.

 

시작하기 앞서 이 글에서 bottom navigation bar는 편하게 "bnb" 라고 하겠다.

 

scffold에 있는 bnb 위젯을 통해 bnb를 생성할 수 있다.

 

또한 bnb 위젯은 BottomNavigationBarItem을 List로 받는다.

 

 

items에 BottomNavigationBarItem을 아이콘과 함께 추가해줍니다.

 

 

이제 item을 클릭시 화면이 변하게 구현해 보겠습니다.

 

페이지에 순서를 나타내는 index를 만들고 initstate에서 0으로 지정해 줍니다.

 

 

BottomNavigationBar에서 currentIndex를 index로 지정해주고

 

클릭이 될 때마다 클릭이된 새로운 인덱스 값으로 교체해줍니다.

 

 

그 후 변경된 화면마다 다르게 보여주기 위해 switch문으로 이루어진 하나의 위젯을 만듭니다.

 

이전에 작성한 아이템의 순서대로 표시할 화면을 분류해준뒤

 

 

scaffold의 body에 만든 위젯을 넣어줍니다.

 

전체 코드

import 'package:flutter/material.dart';

class DashboardScreen extends StatefulWidget {
  const DashboardScreen({super.key});

  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  late int index;

  @override
  void initState() {
    super.initState();
    index = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: homebody(),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'search'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'person'),
        ],
        currentIndex: index,
        onTap: (newIndex) => setState(() {
          index = newIndex;
        }),
      ),
    );
  }

  Widget homebody() {
    switch (index) {
      case 1:
        return const Center(child: Icon(Icons.search, size: 100));
      case 2:
        return const Center(child: Icon(Icons.person, size: 100));
      case 0:
      default:
        return const Center(child: Icon(Icons.home, size: 100));
    }
  }
}