[Flutter] BottomNavigationBar 사용하기

1. BottomNavigationBar 사용법

1) items 부분에 'BottomNavigationBarItem' 위젯을 페이지 개수만큼 넣어준다.

2) body부분에 '화면에 해당하는 위젯'을 페이지 개수만큼 넣어준다.

3) currentIndex 부분에 현재 페이지에 해당하는 인덱스 변수를 넣어준다.

4) onTap 부분에 페이지를 바꾸는 코드를 넣어준다.

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  int currentIndex = 0;
  final screens = const [
    A(),
    B(),
    C(),
    D(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: screens[currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed, // item이 4개 이상일 경우 추가

        onTap: (index) => setState(() => currentIndex = index),
        currentIndex: currentIndex,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
            ),
            label: "a",
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.list,
            ),
            label: "b",
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.calendar_today,
            ),
            label: "c",
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.settings,
            ),
            label: "d",
          ),
        ],
      ),
    );
  }
}