new Day2 (BottomNavigationBar 사용법)

https://material.io/components/bottom-navigation

매티어리얼3에서
https://m3.material.io/components/navigation-bar/overview


사용
3~5개 정도 아이템 (적으면 탭을 사용하고 많으면 navigation drawer를 사용)
모바일이나 태블릿에서만 사용
바텀 네비게이션 대상은 최상위 수준이면서 서로연관이 없는경우. (탭은 공통주제에서 사용됨.)

구성
Container
Inactive icon + Inactive text label
Active icon + Active text label

아이콘은 active destination을 강조해서 구분이 쉽도록할 것.
text는 짧게, shrink 하지말것. 두줄은 피할것.

state
목적지가 3개일 경우 : icon + text
목적지가 4개일 경우 : active icon+text, inactive icon+text(추천)
목적지가 5개일 경우 : active icon+text, inactive icon+text(공간있으면)

뱃지도 달 수 있음.
Bottom navigation with 3 types of badges
1. Badge
2. Badge with a number
3. Badge with a maximum character count

전환
cross-fade animation를 사용하고 lateral motion (측면이동)을 사용하지 말것.

스케일링
화면이 모발일이나 작은 태블릿보다 커지면 화면 사이즈에 맞는 적절한 다른 컴포넌트를 사용할 것.
Bottom navigation(작은), navigation rail. (중간),  navigation drawer.(큰)

 

그외
스크롤 시키지 말것.
랜드스케이프모드에서도 스페이싱을 넓히지 말것

 

<예제코드>

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'bottom app bar',
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {

  const MainPage({Key? key}) : super(key: key);

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bottom App Bar'),
      ),

      //body에서는 BottomNavigationBar에서 선택한 화면을 보여줍니다.
      body: Center(
        child: bodyItem.elementAt(_currentIndex),
      ),

      bottomNavigationBar: BottomNavigationBar(

        // BottomNavigationBarType.fixed 일 때 색깔입니다.
        backgroundColor: Colors.indigo,

        //BottomNavigationBarType.shifting 일경우
        // backgroundColor는  BottomNavigationBarItem 에서 지정합니다.
        type:BottomNavigationBarType.shifting,

        //BottomNavigationBarType.shifting 일경우
        // inactive 의 라벨이 안보이는데 이것을 true로 설정하면 항상보입니다.
        showUnselectedLabels: true,

        selectedItemColor: Colors.amber[800],

        //이렇게 해야 탭이 선택됨.
        currentIndex: _currentIndex,
        onTap: (index){
          setState((){
            _currentIndex = index;
          });
        },

        //뱃지 넣다 보다 너무 작아서 키웠습니다.
        //폰트는 selectedFontSize, unselectedFontSize 둘다 지정해야합니다.
        iconSize:50,

        //label은 required아니지만 반드시 있어야합니다.
        items: [
          const BottomNavigationBarItem(label: 'homeeeee', backgroundColor: Colors.red, icon: Icon(Icons.home) ),
          const BottomNavigationBarItem(label: 'noteeeee', backgroundColor: Colors.yellow, icon: Icon(Icons.note)),
          const BottomNavigationBarItem(label: 'calendar', backgroundColor: Colors.purple, icon: Icon(Icons.calendar_today)),
          const BottomNavigationBarItem(label: 'mailllll', backgroundColor: Colors.teal, icon: Icon(Icons.mail)),
          BottomNavigationBarItem(
              label: 'chattttt',
              backgroundColor: Colors.pink,
              
              //뱃지를 달아 봤습니다.
              icon: Stack(
                children: [
                  Icon(Icons.chat),
                  Positioned(
                    top: 0,
                    right: 0,
                    child: Container(
                      padding: EdgeInsets.symmetric(horizontal: 0, vertical: 2),
                      decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.red),
                      alignment: Alignment.center,
                      child: Text("11", style: TextStyle(fontSize: 15),),
                  ))
                ],
              ))
        ],
      ),
    );
  }

  List bodyItem = const [
    Text('homeeeee'),
    Text('noteeeee'),
    Text('calendar'),
    Text('mailllll'),
    Text('chattttt'),
  ];
}