[Flutter] BottomNavigationBar

build 외부

int _currentIndex = 0;

bottomNavigationBar의 index를 컨트롤 하는 변수

  final List<BottomNavigationBarItem> navigationItems = const [
    BottomNavigationBarItem(icon: Icon(Icons.home_outlined), label: ""),
    BottomNavigationBarItem(icon: Icon(Icons.chat_bubble_outline), label: ""),
    BottomNavigationBarItem(icon: Icon(Icons.person_outline), label: ""),
    BottomNavigationBarItem(icon: Icon(Icons.settings_outlined), label: ""),
  ];

bottomNavigationBar의 items를 설정하는 배열 (사용자가 누르는 버튼)

  final List<Widget> navigationPages = const [
    Center(child: Text("Home", style: TextStyle(fontSize: 30))),
    Center(child: Text("Chat", style: TextStyle(fontSize: 30))),
    Center(child: Text("Profile", style: TextStyle(fontSize: 30))),
    Center(child: Text("Settings", style: TextStyle(fontSize: 30))),
  ];

bottomNavigationBar에서 이동하는 페이지 배열
위의 currentIndex를 이용해서 컨트롤 하므로, items와 길이가 같아야 함

build

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test App"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: navigationItems, // 아이템 배열
        selectedFontSize: 0, // items의 label 사이즈를 0으로 조정하여
        unselectedFontSize: 0, // 아이콘만 여백 없이 보여지도록 함
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex, // 현재 index
        onTap: (value) => setState(() { // 탭 이벤트 : 누른 메뉴의 index로 변경
          _currentIndex = value;
        }),
      ),
      body: navigationPages[_currentIndex], // 본 페이지
      // 페이지 배열에서 index값에 해당하는 페이지를 보여주도록 함
    );
  }

결과