Flutter BottomNavigationBar의 아이콘에 알림 배지 표시, Displaying notification badge on BottomNavigationBar's Icon

질문

새로운 메시지가 수신함 탭에 도착했을 때, BottomNavigationBar의 Icon 위젯의 오른쪽 상단 모서리에 알림 배지(색상이 있는 구슬)를 표시하고 싶습니다. 이는 https://developer.android.com/preview/features/notification-badges.html와 유사하지만, 제 경우에는 앱 내에서 표시됩니다.

기존 아이콘에 오버레이를 그리고 사용자 정의 아이콘 클래스를 만들기 위한 팁이 있을까요?

답변

카운팅 배지의 또 다른 변형 (아이콘 스택으로 구현되고 컨테이너 텍스트로 래핑되며, 카운터가 증가할 때 늘어납니다):

BottomNavigationBarItem(
  icon: new Stack(
    children: <Widget>[
      new Icon(Icons.notifications),
      new Positioned(
        right: 0,
        child: new Container(
          padding: EdgeInsets.all(1),
          decoration: new BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(6),
          ),
          constraints: BoxConstraints(
            minWidth: 12,
            minHeight: 12,
          ),
          child: new Text(
            '$_counter',
            style: new TextStyle(
              color: Colors.white,
              fontSize: 8,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      )
    ],
  ),
  title: Text('알림'),
),