카테고리 없음

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,
          ),
      ),

실행결과