BottomNavigationBar위젯

카테고리 없음

신승호. 2023. 1. 31. 17:31

Scaffold(

body: Center(

child: Text('Hi meme'),

bottomNavigationBar: BottomNavigationBar(

items: [

BottomNavigationBarItem(icon: Icon(Icons.home, color: Colors.red,), label: '홈', ),

BottomNavigationBarItem(icon: Icon(Icons.people), label: '친구'),

BottomNavigationBarItem(icon: Icon(Icons.video_call), label: 'Watch'),

BottomNavigationBarItem(icon: Icon(Icons.verified_user), label: '프로필'),

BottomNavigationBarItem(icon: Icon(Icons.notifications), label: '알림'),

BottomNavigationBarItem(icon: CircleAvatar( backgroundImage: //이미지를 동그랗게 아이콘으로 넣음 NetworkImage('https://picsum.photos/100/100'),), label: '메뉴'),

selectedItemColor: Colors.red, //선택했을때 색

배운내용대로 코딩하면 아래의 이미지처럼 아이콘들이 안나오게 된다.

3개까지는 정상출력 됐지만 4개 이상부터는 안뜬다.

이유는 원래 설계가 그렇기 때문이다 .

4개 이상부터는 shifting의 경우 확대가 되며 이동이 되는 애니메이션이 존재하고 fixed는 선택 색상만 변동하는 애니메이션이기 때문이다.

즉, type: BottomNavigationBarType.fixed 을 써주지 않으면 4개 이상의 Items를 사용할 경우 shifting이 기본값이 된다.

그러므로 type: BottomNavigationBarType.fixed를 써서 Type속성을 바꿔준다.