badges 시각적 알림으로 앱 향상하기

 

Flutter Badges 패키지는 Flutter 앱에 배지를 추가하는 데 사용되는 오픈 소스 패키지 입니다. 
배지는 일반적으로 작은 숫자 또는 아이콘으로 표시되는 시작적 표현이며, 앱 내 특정 요소에 대한 추가정보를 제공하는데 사용됩니다. 
https://pub.dev/packages/badges 를 클릭하여 패키지 install 명령어를 복사합니다.

 

flutter pub add badges

 

 

• 터미널에 해당 명령어를 적어 다운 받습니다. 

터미널에 badges 패키지 다운 명령어 작성

 

BottomNavigationBarItem(
          label: 'Cart',
          icon: badges.Badge(
            position: badges.BadgePosition.topEnd(),
            badgeStyle: badges.BadgeStyle(
              padding: EdgeInsets.all(6),
            ),
            badgeContent: Container(
              height: 3,
              width: 3,
              decoration:
                  BoxDecoration(shape: BoxShape.circle, color: Colors.white),
            ),
            child: Icon(Icons.settings),
          ),
        ),

 

 

• 기본적인 badges 를 사용하는 폼입니다.  해당 코드를 넣고 싶은 버튼 형식에 넣어주면 하위 캡쳐본처럼 표시 됩니다. 

 

기본 코드를 넣었을 시 해당 모습을 볼 수 있습니다.

 

참고. badges 패키지는 기본적으로 bottom_bar 에서  사용되는 패키지이며 하위 캡쳐본에 나온느 이이콘 상단에 이벤트를 표시하는 모든 곳에서 사용될 수 있습니다. 

 

badges 공식 문서의 사용이미지 [참조]