Flutter - BottomNavigationBar

앱의 하단에 보통 3 ~ 5개의 작은 아이콘을 사용해 뷰를 바꾸는 역할을 하는 material 위젯 입니다.

Bottom navigation bar는 material 위에 배치된  다수의 텍스트 라벨, 아이콘, 혹은 그 둘을 모두 사용해 구성됩니다. 이것은 앱의 top-level 뷰 사이를 빠르게 바꿔줍니다. 큰 화면에서는, side navigation을 사용하는 게 더 좋습니다.

 

보통 bottom navigation bar는  Scaffold.bottomNavigationBar 의 인자로 주어져  Scaffold 와 같이 사용됩니다.

 

Bottom navigation bar의  type 은 바 안의  items 들이 어떻게 보여지는지 결정합니다. Type이 명시되어 있지 않았고 항목의 수가 4개 보다 작다면,  BottomNavigationBarType.fixed 로 type이 설정되고, 4 이상이라면, BottomNavigationBarType.shifting이 설정됩니다.

 

items의 길이는 적어도 2개는 되어야 하고, 각각 항목의 아이콘과 제목/라벨은 반드시 null 값이 아니어야 합니다.

 

• 선택된 항목은  selectedItemColor이 null 값이 아니라면 같이 렌더되고, 맞다면  Brightness.light 테마 일 때 테마의  ColorScheme.primary 컬러가 사용되고 Brightness.dark 테마 일 때는, ColorScheme.secondary 이 사용됩니다. 만약  backgroundColor이 null 값이라면, navigation bar의 배경색은  Material의 배경색(ThemeData.canvasColor)이 디폴트로 설정됩니다.
• 만약 selectedItemColor이 null 값이라면, 모든 항목들은 흰색으로 런더 됩니다. Navigation bar의 배경색은 선택된 항목의  BottomNavigationBarItem.backgroundColor와 같습니다. 이런 경우에 각각의 아이템들은 다른 배경색을 가지고, 그 색들은 흰색과 구분이 잘 되어야 합니다.(당연한 말)

생성자

BottomNavigationBar({
    Key? key, required List<BottomNavigationBarItem> items, ValueChanged<int>? onTap,

     int currentIndex = 0, double? elevation, BottomNavigationBarType? type, Color? fixedColor, Color? backgroundColor,

     double iconSize = 24.0, Color? selectedItemColor, Color? unselectedItemColor, IconThemeData? selectedIconTheme,

     IconThemeData? unselectedIconTheme, double selectedFontSize = 14.0, double unselectedFontSize = 12.0, 

    TextStyle? selectedLabelStyle, TextStyle? unselectedLabelStyle, bool? showSelectedLabels, 

    bool? showUnselectedLabels, MouseCursor? mouseCursor, bool? enableFeedback, 

    BottomNavigationBarLandscapeLayout? landscapeLayout
})

(이름에서 확실히 알 수 있는 것, 뻔한 것 생략)

1. onTap: 바가 탭 되면 수행할 함수
2. currentIndex: 현재 선택된 항목의 인덱스
3. elevation: BottomNavigationBar의 z-coordinate를 의미한다 => 위젯 그림자의 크기와 elevation의 투명도를 제어합니다.
4. type:  BottomNavigationBar의 동작 방식과, 레이아웃을 결정한다.  
   1. fixed: 눌렀을 때 아이템 고정
   2. shifting: 눌렀을 눌린 항목의 width가 다른 항목들 보다 커진다.
   3. values: type들의 List이다.
5. fixedColor:  selectedItemColor의 값
6. backgroundColor:  BottomNavigationBar의 색
7. selectedItemColor: 선택된 항목의 아이콘과 라벨의 색을 결정한다.
8. selectedIconTheme: IconThemeData 타입 인자로, 현재 선택된 아이콘의 색, 투명도, 크기를 결정한다.
9. showSelectedLabels: 선택된 아이템의 라벨 표시 여부를 결정한다,
10. mouseCursor: 바 위로 마우스가 들어오고 항목을 호버링 할 때의 커서
11. enableFeedback: 눌렀을 때 acoustic, haptic 피드백을 사용 할 것인지 결정한다.
12. 둘러싸고 있는 MediaQueryData.orientation이 Orientation.landscape 일 때, 바의 아이템들의 정렬을 결정한다.

상속 여부

BottomNavigationBar extends StatefulWidget extends Widget extends DiagnosticableTree with Diagnosticable