[Flutter] bottomNavigationBar_00

BottomNavigationBarItem() 위젯이 4개 이상일 경우, 각각의 아이콘을 선택하면 backgroundColor의 값에 따라 색변화 애니메이션이 활성화 된다.

먼저 바텀 메뉴 선택에 따른 화면(body) 인덱스를 나타내는 변수와 메뉴 선택(onTap)을 할 경우 그 인덱스를 넣는 함수를 선언한다.

  int _selectedIndex = 0;

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

이후 bottomNavigationBar 코드~

      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onTap,
        items: [
          BottomNavigationBarItem(
            icon: _selectedIndex == 0
                ? const Icon(Icons.widgets)
                : const Icon(Icons.widgets_outlined),
            label: 'Components',
            backgroundColor: Colors.red.shade300,
          ),
          BottomNavigationBarItem(
            icon: _selectedIndex == 1
                ? const Icon(Icons.format_paint_outlined)
                : const Icon(Icons.format_paint_outlined),
            label: 'Color',
            backgroundColor: Colors.yellow.shade300,
          ),
          BottomNavigationBarItem(
              icon: _selectedIndex == 2
                  ? const Icon(Icons.text_snippet)
                  : const Icon(Icons.text_snippet_outlined),
              label: 'Typography',
              backgroundColor: Colors.green.shade300),
          BottomNavigationBarItem(
              icon: _selectedIndex == 3
                  ? const Icon(Icons.invert_colors_on)
                  : const Icon(Icons.invert_colors_on_outlined),
              label: 'Elevation',
              backgroundColor: Colors.blue.shade300),
        ],
      ),

3개 이하일 경우, type: BottomNavigationBarType.shifting 을 추가하면 색변화 애니메이션 추가 가능!

BottomNavigationBar의 경우 Material Design 2를 따른다!