android 개발/android 이론(flutter)
하단에 Bar 생성하기
웅드
2023. 5. 19. 16:13
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.black,
unselectedItemColor: Colors.black,
showUnselectedLabels: true,
selectedFontSize: 12,
unselectedFontSize: 12,
iconSize: 28,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home_filled),
label: '홈',
backgroundColor: Colors.white,
),
BottomNavigationBarItem(
icon: Icon(Icons.my_library_books_outlined),
label: '동네생활',
),
BottomNavigationBarItem(
icon: Icon(Icons.fmd_good_outlined),
label: '내 근처',
),
BottomNavigationBarItem(
icon: Icon(CupertinoIcons.chat_bubble_2),
label: '채팅',
),
BottomNavigationBarItem(
icon: Icon(
Icons.person_outline,
),
label: '나의 당근',
),
],
currentIndex: 0,
),
);
}
}
- 하단에 바를 생성하기 위해 BottomNavigationBar 위젯을 사용해 bar를 먼저 생성해주었다.
- bar의 스타일을 정의해 준 후 BottomNabigationBarItem을 이용해 icon을 생성해주었다.
반응형