728x90
반응형
BottomNavigationBar를 구현해보자.
Scaffold widget안에 bottomNavigationBar 속성이 있다.
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
)
해당 코드는 3개의 메뉴를 추가한 것이다.
bottomnavigation 메뉴를 누를 때마다 화면을 전환하기위해 추가 코드를 작성한다.
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
];
_onItemTapped // 메뉴 클릭 시 선택된 index를 넣어준다.
_widgetOptions // index에 해당하는 화면을 보여준다.
*** 아이템에서 라벨을 선택했을 때, 선택 안했을 때 보여지는 옵션
showSelectedLabels: false,
showUnselectedLabels: false,
dart 공식문서 참조 :
https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html
728x90
반응형
'Flutter' 카테고리의 다른 글
[j Flutter] 금액 콤마 / 숫자 3자리마다 (,) 표시 (0) | 2020.10.29 |
---|---|
[j Flutter] convex_bottom_bar 사용하기 (0) | 2020.10.28 |
[j Flutter] Vertical viewport was given unbounded height 에러 처리 (0) | 2020.10.26 |
[j Flutter] GoogleMap 추가하기 (지도추가하기) (0) | 2020.10.22 |
[j Flutter] list 조건문 / 정렬하기 (0) | 2020.10.19 |