[Flutter] bottomNavigationBar_01

이전 포스팅은 Material Design 2이고 이번에는 Material Design 3의 경우 bottomNavigationBar를 기록한다.

마찬가지로 화면(body) 인덱스에 관한 변수와 함수를 선언한다.

  int _selectedIndex = 0;

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

이후 BottomNavigationBar가 아닌 NavigationBar 위젯을 불러온다.
BottomNavigationBar 는 Material Design 2 이고,
NavigationBar는 Material Design 3 이다.

      bottomNavigationBar: NavigationBar(
        selectedIndex: _selectedIndex,
        onDestinationSelected: _onTap,
        destinations: [
          NavigationDestination(
            icon: _selectedIndex == 0
                ? const Icon(Icons.widgets)
                : const Icon(Icons.widgets_outlined),
            label: 'Components',
          ),
          NavigationDestination(
            icon: _selectedIndex == 1
                ? const Icon(Icons.format_paint_outlined)
                : const Icon(Icons.format_paint_outlined),
            label: 'Color',
          ),
          NavigationDestination(
            icon: _selectedIndex == 2
                ? const Icon(Icons.text_snippet)
                : const Icon(Icons.text_snippet_outlined),
            label: 'Typography',
          ),
          NavigationDestination(
            icon: _selectedIndex == 3
                ? const Icon(Icons.invert_colors_on)
                : const Icon(Icons.invert_colors_on_outlined),
            label: 'Elevation',
          ),

BottomNavigationBar의 currentIndex, onTap, items는
NavigationBar의 selectedIndex, onDestinationSelected, destinations와 같다.