Flutter 하단 네비게이션 바 만들기 (BottomNavigationBar)

우리가 스마트폰으로 어플을 사용하다 보면 항상 정해진 느낌이 있다

상단에는 Appbar가 있고 메뉴버튼이나 로고 등이 있고

하단에는 NavigationBar가 있고 홈버튼 프로필보기 버튼 등이 있다

AppBar는 한번 만든적이 있으니 이번에는 Bottom에 3개의 메뉴가 있는 NavigationBar를 만들어 볼 것이다

 

1. 기본 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practice_page.dart (실행이 될 때 맨 처음 화면)

 

import 'package:flutter/material.dart';

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

  @override
  State<PracticePage> createState() => _PracticePageState();
}

class _PracticePageState extends State<PracticePage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

내비게이션의 상태가 변화를 하기 때문에 StatefutWidget을 사용한다

 

☟내비게이션변화에 따른 화면들 (3개 화면)

index_sreen1.dart 

import 'package:flutter/material.dart';

class IndexScreen1 extends StatelessWidget {
  const IndexScreen1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("IndexScreen1"),
    );
  }
}

index_sreen2.dart

import 'package:flutter/material.dart';

class IndexScreen2 extends StatelessWidget {
  const IndexScreen2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("IndexScreen2"),
    );
  }
}

index_sreen3.dart

import 'package:flutter/material.dart';

class IndexScreen3 extends StatelessWidget {
  const IndexScreen3({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("IndexScreen3"),
    );
  }
}

 

 

2. IndexedStack

우선 인덱스를 정의하고, 어떤 화면을 사용할 것인지 결정한다

practice_page.dart 

int _selectedIndex = 0;

return Scaffold(
  body: IndexedStack(
    index: _selectedIndex,
    children: [
      // index_screen1
      IndexScreen1(),
      // index_screen2
      IndexScreen2(),
      // index_screen3
      IndexScreen3(),
    ],
  ),
);

네비게이션의 선택했을 때, index가 필요하다 3개의 메뉴가 있다고 가정하면 처음이 0, 두 번째가 1, 세 번째가 2이라 한다

현재 화면에서 세 번째 메뉴를 클릭했을 때, 2에 매칭이 되는 화면으로 바로 전환이 되게끔 한다

children에 안의 요소는 3개의 화면의 정보를 넣어주었다

 

 

3. ButtonNavigationBar

드디어 하단 네이게이션바를 만들 수 있다.

practice_page.dart 

bottomNavigationBar: BottomNavigationBar(
  currentIndex: _selectedIndex,
  onTap: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: "home"),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: "search"),
    BottomNavigationBarItem(icon: Icon(Icons.people), label: "my"),
  ],
),

currentIndex는 현재 index를 뜻한다. 맨 초기값은 0으로 설정해 놨었다

onTap은 버튼을 클릭하였을 때 실행되는 함수이다

함수 안에 setState로 index값을 내비게이션에서 선택한 메뉴의 인덱스값으로 변경한다

items는 내비게이션바안의 메뉴들을 뜻한다

이 상태로 바로 실행을 해보도록 하겠다

초기는 index값이 0이기 때문에 0에 매칭이 되는 index_screen1.dart화면을 보여주게 된다

다른 메뉴도 한번 선택해 보겠다

search를 눌렀을 때 setState함수가 실행되면서 index값이 변경되고, indexStack에 있는 화면중 같은 index인 화면을 에뮬레이터에 뿌려준다