Flutter tabbar上的badge

允澄

于 2023-08-09 17:45:01 发布

阅读量416

点赞数

CC 4.0 BY-SA版权

文章标签： flutter

本文链接：https://blog.youkuaiyun.com/shaoxiukun/article/details/132193537

文章介绍了如何在Flutter应用中使用`pubspec.yaml`引入badges库，并展示了如何在`BottomNavigationBarItem`中动态显示badge，根据索引改变颜色和内容，如未读计数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、pubspec.yaml添加

badges: ^3.1.1

2、flutter put get

3、传入index为显示badge的位置

BottomNavigationBarItem _buildTabs(int index) {
    return BottomNavigationBarItem(

      label: _tabs[index],
      icon: badges.Badge(
        badgeStyle: badges.BadgeStyle(
          badgeColor: index == 1 ? Colors.red :Colors.transparent,
        ),
        position: badges.BadgePosition.topEnd(top: -14),
        badgeContent: index == 1 ? Text(

          '$unreadCount',
          style: const TextStyle(color: Colors.white,fontSize: 10),
        ):null,

        child: Image.asset(
          "images/${_tabIcons[index]}${index == _checkIndex ? "c" : "n"}.png",
          width: 24,
          height: 24,
        ),
      ),
    );
  }