BottomNavigationBar

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

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

  @override
  State<MainNavigationScreen> createState() => _MainNavigationScreenState();
}

class _MainNavigationScreenState extends State<MainNavigationScreen> {
  int _selectedIndex = 0;

  final screens = [
    const Center(
      child: Text('Home'),
    ),
    const Center(
      child: Text('Search'),
    ),
    const Center(
      child: Text('Home'),
    ),
    const Center(
      child: Text('Search'),
    ),
    const Center(
      child: Text('Search'),
    )
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: screens[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.shifting,
        currentIndex: _selectedIndex,
        onTap: _onTap,
        //selectedItemColor: Theme.of(context).primaryColor,
        items: const [
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.house),
            label: "Home",
            tooltip: "What are you?",
            backgroundColor: Colors.amber,
          ),
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.magnifyingGlass),
            label: "Search",
            tooltip: "What are you?",
            backgroundColor: Colors.blue,
          ),
        ],
      ),
    );
  }
}

bottomNavigationBar는 Flutter의 Scaffold 위젯에서 하단에 위치하는 탐색 바를 정의하는 속성입니다. BottomNavigationBar 위젯은 일반적으로 앱의 주요 탐색 경로 간의 전환을 도와줍니다.

위의 코드에서 사용된 주요 속성들에 대한 설명은 다음과 같습니다:

1. type: BottomNavigationBarType의 값을 가집니다. 두 가지 타입이 있습니다: fixed와 shifting. fixed는 모든 항목이 동일한 너비를 가지고, shifting은 선택된 항목이 확장되며 배경색이 나타나게 합니다. 여기서는 shifting을 사용하였습니다.

2. currentIndex: 현재 선택된 탐색 항목의 인덱스입니다. 이 예에서는 _selectedIndex 변수를 사용하여 현재 선택된 항목을 추적합니다.

3. onTap: 항목이 탭 될 때 호출되는 콜백입니다. 여기서는 _onTap 함수가 호출될 것입니다.

4. selectedItemColor: 선택된 항목의 아이콘과 레이블 색상을 설정합니다. 이 코드에서는 주석 처리되어 있으므로 사용되지 않습니다.

5. items: BottomNavigationBarItem의 리스트입니다. 각 항목은 아이콘, 레이블, 툴팁, 배경색 등을 정의합니다.

   • icon: 항목의 아이콘을 나타냅니다. FaIcon은 FontAwesome 패키지에서 제공하는 아이콘 위젯입니다.

   • label: 아이콘 아래에 표시되는 텍스트 레이블입니다.

   • tooltip: 항목 위로 마우스를 가져갔을 때 표시되는 짧은 설명 텍스트입니다.

   • backgroundColor: shifting 타입의 BottomNavigationBar에서 선택된 항목의 배경색입니다.

위의 코드는 BottomNavigationBar에 두 개의 항목 (홈 및 검색)을 가진 예제를 보여줍니다. 필요에 따라 추가 항목을 추가하여 확장할 수 있습니다.

BottomNavigationBar에서 BottomNavigationBarItem은 최소 2개 이상이어야 합니다. 공식 Flutter 문서에 따르면, items 리스트에는 2개에서 5개 사이의 항목이 포함되어야 합니다.

만약 BottomNavigationBarItem이 1개만 있다면, 실행 시 AssertionError가 발생하게 됩니다. 이러한 제한 사항은 사용자에게 직관적이고 일관된 탐색 경험을 제공하기 위한 것입니다.

따라서 BottomNavigationBar를 사용할 때는 최소 2개의 항목을 포함시켜야 합니다.

BottomNavigationBarType.shifting은 items 속성에 4개 이상의 항목이 포함되어 있을 때 자동으로 적용됩니다. BottomNavigationBarType.fixed는 항목의 배경색이 고정되어 있으며, BottomNavigationBarType.shifting은 선택된 항목의 배경색이 항목의 색상으로 변경되는 효과를 나타냅니다.

1. currentIndex: _selectedIndex,

   • currentIndex: 현재 활성화된 BottomNavigationBar의 아이템 인덱스를 나타냅니다.
   • _selectedIndex: 현재 선택된 탭의 인덱스를 나타내는 상태 변수입니다. 초기값은 0으로, 첫 번째 아이템이 기본적으로 활성화됩니다.
   • currentIndex의 값으로 _selectedIndex를 사용하면, _selectedIndex 값에 따라 어떤 탭이 활성화될지를 BottomNavigationBar에 알려주게 됩니다.

2. onTap: _onTap,

   • onTap: BottomNavigationBar의 아이템을 탭할 때 호출되는 콜백 함수입니다.

   • _onTap: 사용자가 탭을 선택할 때 호출되는 함수입니다. 이 함수는 선택된 탭의 인덱스를 매개변수로 받아 _selectedIndex 상태 값을 해당 인덱스로 업데이트합니다.

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

     		`_onTap` 함수는 `setState` 내에서 `_selectedIndex` 값을 업데이트하여 화면을 다시 렌더링하게 됩니다. 이렇게 함으로써 사용자가 선택한 탭에 해당하는 화면이 보여지게 됩니다.

결론적으로, currentIndex와 onTap은 BottomNavigationBar의 현재 활성화된 아이템과 사용자의 탭 선택에 반응하여 화면을 업데이트하는 데 중요한 역할을 합니다.

코드 내 body: screens[_selectedIndex], 이 부분은 현재 화면의 본문(body)을 어떻게 표시할지 결정합니다.

screens는 위젯 목록을 가리키는 리스트입니다. 이 리스트는 다양한 위젯(여기서는 Center 위젯을 사용한 간단한 텍스트 화면들)을 순서대로 포함하고 있습니다.

_selectedIndex는 현재 선택된 화면의 인덱스를 나타내는 정수형 변수입니다. 처음에는 0으로 초기화되어 있으므로, 앱이 처음 실행될 때 screens 리스트의 첫 번째 항목(screens[0])이 본문으로 표시됩니다.

BottomNavigationBar의 항목을 클릭하면 _onTap 함수가 호출되고, _selectedIndex 값이 해당 항목의 인덱스로 업데이트됩니다. 그런 다음 setState를 통해 화면이 다시 빌드되며, 이로 인해 body에 새로운 화면이 표시됩니다.

간단하게 요약하면, _selectedIndex의 값에 따라서 screens 리스트에서 해당 인덱스의 화면이 본문(body)으로 표시되게 되는 구조입니다.

BottomNavigationBar(
  type: BottomNavigationBarType.shifting,
  currentIndex: _selectedIndex,
  onTap: _onTap,
  items: const [
    BottomNavigationBarItem(
      icon: FaIcon(FontAwesomeIcons.house),
      label: "Home",
      tooltip: "Home",
      backgroundColor: Colors.amber,
    ),
    BottomNavigationBarItem(
      icon: FaIcon(FontAwesomeIcons.magnifyingGlass),
      label: "Search",
      tooltip: "Search",
      backgroundColor: Colors.blue,
    ),
    BottomNavigationBarItem(
      icon: FaIcon(FontAwesomeIcons.user),
      label: "Profile",
      tooltip: "Profile",
      backgroundColor: Colors.green,
    ),
    BottomNavigationBarItem(
      icon: FaIcon(FontAwesomeIcons.bell),
      label: "Notifications",
      tooltip: "Notifications",
      backgroundColor: Colors.red,
    ),
    BottomNavigationBarItem(
      icon: FaIcon(FontAwesomeIcons.cog),
      label: "Settings",
      tooltip: "Settings",
      backgroundColor: Colors.grey,
    ),
  ],
),

자동으로 animation이 발생하게 되고 특정 메뉴를 탭할 때마다 배경색이 변화합니다. BottomNavigationBarType.shifting은 items 속성에 4개 이상의 항목이 포함되어 있을 때 자동으로 적용됩니다. BottomNavigationBarType.fixed는 항목의 배경색이 고정되어 있으며, BottomNavigationBarType.shifting은 선택된 항목의 배경색이 항목의 색상으로 변경되는 효과를 나타냅니다.