flutter에서 바텀 네비게이션 바(Bottom Navigation Bar)

Flutter에서 바텀 네비게이션 바(Bottom Navigation Bar)는 주로 앱의 주요 네비게이션을 제공하는 데 사용됩니다. 사용자에게 앱의 주요 섹션을 탐색할 수 있는 인터페이스를 제공합니다. 아래는 바텀 네비게이션 바에 대한 주요 특징과 예제들을 정리한 것입니다.

 

주요 특징

 

1. 사용 용도:

• 앱의 주요 섹션 간 빠른 네비게이션을 제공.

• 일반적으로 3~5개의 탭을 포함.

• 각 탭에는 아이콘과 선택적으로 텍스트 레이블을 포함할 수 있음.

2. 구성 요소:

• items: 네비게이션 항목 목록으로, 각각 BottomNavigationBarItem 객체를 포함.

• currentIndex: 현재 선택된 탭의 인덱스.

• onTap: 사용자가 탭을 선택할 때 호출되는 콜백 함수.

• type: 네비게이션 바의 타입(fixed 또는 shifting).

 

예제 코드

 

아래는 Flutter에서 바텀 네비게이션 바를 구현하는 기본적인 예제입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      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'),
    Text('Search Page'),
    Text('Profile Page'),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar Example'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

주요 속성

 

1. items:

• BottomNavigationBarItem 객체의 리스트로, 각 항목은 아이콘과 텍스트 레이블을 가짐.

• 예제:

items: const <BottomNavigationBarItem>[
  BottomNavigationBarItem(
    icon: Icon(Icons.home),
    label: 'Home',
  ),
  BottomNavigationBarItem(
    icon: Icon(Icons.search),
    label: 'Search',
  ),
  BottomNavigationBarItem(
    icon: Icon(Icons.person),
    label: 'Profile',
  ),
],

 

2. currentIndex:

• 현재 선택된 탭의 인덱스를 나타냄.

• 예제:

currentIndex: _selectedIndex,

 

3. onTap:

• 사용자가 탭을 선택할 때 호출되는 콜백 함수.

• 예제:

onTap: _onItemTapped,

4. type:

• 네비게이션 바의 타입을 설정. BottomNavigationBarType.fixed 또는 BottomNavigationBarType.shifting을 사용.

• 예제:

type: BottomNavigationBarType.fixed,

참고 자료

 

• Flutter Documentation - BottomNavigationBar

• Flutter Cookbook - BottomNavigationBar