카테고리 없음
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속성을 바꿔준다.
body: Center(
child: Text('Hi meme'),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
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( radius: 13, backgroundImage: NetworkImage('https://picsum.photos/100/100'),), label: '메뉴'),
],
selectedItemColor: Colors.red,
),
),