flutter navigaion bar 네이게이션 바 사용하기

BottomNavigationBar는 Flutter에서 화면 하단에 배치하여 여러 화면으로 쉽게 전환할 수 있도록 도와주는 네비게이션 바입니다.

일반적으로 3~5개의 탭을 가지며, 각 탭을 선택하면 해당 화면으로 이동할 수 있습니다.

 

주요 속성

 

• items: 네비게이션 바에 표시될 항목 목록 (BottomNavigationBarItem).

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

• onTap: 항목이 탭될 때 호출되는 콜백 함수.

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

• backgroundColor: 네비게이션 바의 배경색.

• selectedItemColor: 선택된 항목의 색상.

• unselectedItemColor: 선택되지 않은 항목의 색상.

 

기본 사용 예제

 

아래는 BottomNavigationBar를 사용하여 화면 하단에 네비게이션 바를 배치하고, setState를 사용하여 화면을 업데이트하는 예제입니다.

 

코드 예제 

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  
  late TabController _tabController;
  int _selectedIndex = 0;
  
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
    _tabController.addListener(
      () => setState(() => _selectedIndex = _tabController.index)
    );
  }

  // 페이지 종료 시 종료해 주는 기능
  @override
  void dispose() {
    super.dispose();

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("test title"),
        ),
        body: _selectedIndex == 0
      ? tabContainer(context, Colors.indigo, "Friends Tab")
        : _selectedIndex == 1 ? tabContainer(context, Colors.yellow, "Chats Tab")
        : tabContainer(context, Colors.blue, "Setting Tab"),
      bottomNavigationBar: SizedBox(
        height: 90,
        child: TabBar(
          controller: _tabController,
          labelColor: Colors.black,
          tabs: [
            Tab(
             icon: Icon(
                 _selectedIndex == 0 ? Icons.person : Icons.person_2_outlined
             ),
             text: "Friends",
            ),
            Tab(
              icon: Icon(
                  _selectedIndex == 1 ? Icons.chat : Icons.chat_outlined
              ),
              text: "Chats",
            ),
            Tab(
              icon: Icon(
                  _selectedIndex == 2 ? Icons.settings : Icons.settings_outlined
              ),
              text: "Settings",
            ),
          ],
        ),
      ),
    );
  }

  Widget tabContainer(BuildContext con, Color tabColor, String tabText) {
    return Container(
      width: MediaQuery.of(con).size.width,
      height: MediaQuery.of(con).size.height,
      color: tabColor,
      child: Center(
        child: Text(
          tabText,
          style: const TextStyle(
            color: Colors.white
          ),
        ),
      ),
    );
  }

}

 

 

다른 예제 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  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: const Text('BottomNavigationBar 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. BottomNavigationBarItem: 네비게이션 바에 표시될 항목을 정의합니다. icon과 label 속성을 가집니다.

2. currentIndex: 현재 선택된 항목의 인덱스를 저장합니다.

3. onTap: 항목이 탭될 때 호출되는 콜백 함수로, 선택된 인덱스를 업데이트하고 화면을 새로 고칩니다.

4. setState: 상태 변화를 적용하여 UI를 다시 빌드합니다.

 

BottomNavigationBar와 setState 설명

 

BottomNavigationBar

 

BottomNavigationBar는 하단 네비게이션 바를 만드는 데 사용됩니다. 여러 개의 탭을 제공하여 각 탭에 다른 화면을 연결할 수 있습니다.

 

• items: BottomNavigationBarItem 목록으로, 각 항목에는 icon과 label이 포함됩니다.

• currentIndex: 현재 선택된 탭의 인덱스를 지정합니다.

• onTap: 탭이 선택될 때 호출되는 콜백 함수로, 탭의 인덱스를 매개변수로 받습니다.

 

setState

 

setState는 상태가 변경될 때 UI를 다시 빌드하는 데 사용됩니다. 네비게이션 바의 선택된 인덱스를 업데이트할 때 호출됩니다.

 

• setState(): 내부 상태를 업데이트하고 변경된 상태를 반영하기 위해 UI를 다시 빌드합니다. 상태 변경이 필요할 때마다 호출해야 합니다.

 

요약

 

• BottomNavigationBar는 Flutter에서 화면 하단에 네비게이션 바를 배치하여 여러 화면으로 쉽게 전환할 수 있도록 도와줍니다.

• setState는 상태 변경 시 UI를 다시 빌드하는 데 사용됩니다.

• BottomNavigationBar와 setState를 함께 사용하여 탭 선택 시 화면을 업데이트할 수 있습니다.