[Day29]Flutter Netflix UI 底部导航栏上的通知数量

大家好，上一篇我们成功在Android手机上接到通知，今天我们在底部导航栏上显示通知

先设置一个变数

  int notificationCount = 0;

onMessage

从前篇我们可以看到如果App是打开的状态，消息会透过onMessage传进来，所以我在这边做加一的动作

I/flutter (18142): onMessage: {notification: {title: 再测试一次, body: 测试2}, data: {data: 来自星星的你, type: 最新上线}}

  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();

@override
  void initState() {
    _firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        print("onMessage: $message");
        setState(() => notificationCount++); //新增，接收到讯息就+1
        // _showItemDialog(message);
      },
      onBackgroundMessage: myBackgroundMessageHandler,
      onLaunch: (Map<String, dynamic> message) async {
        print("onLaunch: $message");
        // _navigateToItemDetail(message);
      },
      onResume: (Map<String, dynamic> message) async {
        print("onResume: $message");
        // _navigateToItemDetail(message);
      },
    );
    super.initState();
  }

底部导航栏显示通知数量

修改BottomNavigationBarItem，原本只有一个Icon，改成再用Stack叠一个数字上去

 _buildItemWithNotification() {
    return Stack(
      children: [
        Icon(Icons.featured_play_list),
       if( notificationCount!=0 ) Positioned( //判断假如不是零的时候才显示
          top: 0,
          right: 0,
          child: Transform.translate(
            offset: Offset(3,-3), //先右上偏移一点点
            child: Container(
              padding: EdgeInsets.all(1),
              decoration:  BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(6),
              ),
              constraints: BoxConstraints(
                minWidth: 12,
                minHeight: 12,
              ),
              child: Text('$notificationCount',style: TextStyle(fontSize: 10.0),textAlign: TextAlign.center,),
            ),
          ),
        )
      ],
    );
  }

 bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
            BottomNavigationBarItem(
                icon: Icon(Icons.search), title: Text("搜寻")),
            BottomNavigationBarItem(
                icon: _buildItemWithNotification(), title: Text("即将上线")),
            BottomNavigationBarItem(
                icon: Icon(Icons.file_download), title: Text("下载内容")),
            BottomNavigationBarItem(
                icon: Icon(Icons.more_vert), title: Text("更多")),
          ],
          iconSize: 24.0,
          backgroundColor: Colors.black54,
          currentIndex: currentIndex,
          selectedFontSize: 12.0,
          unselectedFontSize: 12.0,
          selectedItemColor: Colors.white,
          unselectedItemColor: Colors.grey,
          onTap: (index) {
            setState(() {
              currentIndex = index;
            });
          },
          type: BottomNavigationBarType.fixed,
        ),