[Flutter] Bottom Navigation Bar 작동 방식

Flutter 앱 하단부의 Bottom Navigation Bar 작동 방식 간단 정리해보겠습니다.

---

1. BottomNavigationBar 위젯의 currentIndex 속성은 현재 선택된 탭의 인덱스를 나타냄.

 

2. 각 탭 항목은 BottomNavigationBarItem 객체로 표현되며, 리스트 내에서 0부터 시작하는 인덱스를 가짐.

 

3. 사용자가 탭을 선택할 때마다 onTap 콜백 함수가 호출되고, 선택된 탭의 인덱스가 함수의 인자로 전달됨.(아래의 코드에서는 int타입의 index)

 void _onItemTapped(int index) {

    setState(() {

      _selectedIndex = index;

    });

  }

 

4. setState 호출로 빌드 재시행(bottom navigation bar 변경에 따른 화면 다시 빌드)

import 'package:flutter/material.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Bottom Navigation Bar',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: MyHomePage(),

    );

  }

}

class MyHomePage extends StatefulWidget {

  @override

  _MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

  int _selectedIndex = 0;

  static const List<Widget> _widgetOptions = <Widget>[

    Text('Home Page', style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),

    Text('Search Page', style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),

    Text('Profile Page', style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),

  ];

  void _onItemTapped(int index) {

    setState(() {

      _selectedIndex = index;

    });

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Flutter Bottom Navigation Bar'),

      ),

      body: Center(

        child: _widgetOptions.elementAt(_selectedIndex),

      ),

      bottomNavigationBar: BottomNavigationBar(

        type: BottomNavigationBarType.shifting, // 여기에서 변경

        items: const <BottomNavigationBarItem>[

          BottomNavigationBarItem(

            icon: Icon(Icons.home),

            label: 'Home',

            backgroundColor: Colors.blue, // 선택 시 배경 색상

          ),

          BottomNavigationBarItem(

            icon: Icon(Icons.search),

            label: 'Search',

            backgroundColor: Colors.green, // 선택 시 배경 색상

          ),

          BottomNavigationBarItem(

            icon: Icon(Icons.person),

            label: 'Profile',

            backgroundColor: Colors.red, // 선택 시 배경 색상

          ),

        ],

        currentIndex: _selectedIndex,

        selectedItemColor: Colors.white, // 선택된 항목의 아이콘 및 텍스트 색상

        onTap: _onItemTapped,

      ),

    );

  }

}

cf)참고로,type : BottomNavigationBarType.shifting 속성을 지정해주면,

1)선택한 항목 배경색 강조

2)선택된 항목 레이블만 표시 가능.   

3)애니메이션 효과 적용 가능

합니다.

---

이상입니다.

읽어주셔서 감사합니다.