프런트엔드/Flutter ( APP )
badges 시각적 알림으로 앱 향상하기
Alan__kang__morlang
2024. 4. 14. 14:28
반응형
Flutter Badges 패키지는 Flutter 앱에 배지를 추가하는 데 사용되는 오픈 소스 패키지 입니다.
배지는 일반적으로 작은 숫자 또는 아이콘으로 표시되는 시작적 표현이며, 앱 내 특정 요소에 대한 추가정보를 제공하는데 사용됩니다.
https://pub.dev/packages/badges 를 클릭하여 패키지 install 명령어를 복사합니다.
flutter pub add 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 에서 사용되는 패키지이며 하위 캡쳐본에 나온느 이이콘 상단에 이벤트를 표시하는 모든 곳에서 사용될 수 있습니다.
반응형