Flutter Badge标记组件

安装库

dependencies:
  badges: ^2.0.2

引入

 import 'package:badges/badges.dart';

使用

    Badge(
      badgeContent: Text('3'),
      child: Icon(Icons.settings),
    )

示例图:

图片[1]-Flutter Badge标记组件-IT网络技术分享
BadgeAnimationType.slide
图片[2]-Flutter Badge标记组件-IT网络技术分享
BadgeAnimationType.scale
图片[3]-Flutter Badge标记组件-IT网络技术分享
BadgeAnimationType.fade

属性详解


            Badge(
              //标记内容
              badgeContent: Text('3'),
              //子组件
              child: Container(margin: EdgeInsets.all(10), child: Text("显示内容")),
              //标记背景颜色
              badgeColor: Colors.red,
              //标记阴影
              elevation: 5,
              //这控制动画状态。默认值是true。如果为 true,则允许动画,如果为 false,则禁止动画.
              toAnimate: false,
              //标记显示位置
              position: BadgePosition.bottomEnd(),
              //标记显示形状
              shape: BadgeShape.circle,
              //标记内边距
              padding: EdgeInsets.all(5),
              //动画持续时间
              animationDuration: Duration(seconds: 3),
              //半径
              // borderRadius: BorderRadius.all(Radius.circular(150)),
              //这定义了您的 [子组件] 的对齐方式。默认值为 [Alignment.center]。
              alignment: Alignment.center,
              //动画类型
              animationType: BadgeAnimationType.fade,
              //显示标记
              showBadge: true,
              //忽略指针
              ignorePointer: true,
              //边框边
              borderSide: BorderSide.none,
              //堆叠适合
              stackFit: StackFit.loose,
              //坡度
              // gradient: ,
            )
THE END
喜欢就支持一下吧
点赞11 分享