我们在上一章回中介绍了WebView组件相关的内容，本章回中将介绍如何在图标旁边添加小红点.闲话休提，让我们一起Talk Flutter吧。

概念介绍

在实际项目中有时候需要在图标旁边显示小红点，而且小红点内还有数字，比如购物车图标显示小红点表示有商品添加到购物车中，小红点内的数字就是购物车中商品的数
量。本章回中将介绍如何在图标旁边添加小红点。

实现方法

在Android或者IOS原生开发中，如果想实现图标旁边的小红点就需要自定义View。在Flutter中就不需要这么做了，因为官方已经给我们封装了相应的组件:Badge.
我们直接拿来使用就可以在图标旁边添加小红点。和其它的组件一样，Badge组件提供了相关的属性来控制自己，下面是常用的属性：

• label属性:用来控制红点中显示的内容；
• backgroundColor属性:用来控制红点的颜色,默认是红色;
• textColor属性:用来控制红点中文字的颜色,默认是白色;
• alignment属性:用来控制红点的位置，默认传值是topRight；
• child属性:用来控制红点的宿主，就是说在哪个组件旁边显示红点；
  只通过文字介绍这些属性比较抽象，在后面的小节中，我们将通过具体的代码来演示Badge组件的使用方法。

示例代码

Badge(///红点中显示的内容label: Text('3'),///默认红底白字backgroundColor: Colors.purpleAccent,textColor: Colors.green,///红点的位置,默认topRightalignment: Alignment.topLeft,///红点的偏移，负值为向左和上，正值为向右和下offset: Offset(20.0, -10.0),///在哪个组件右上角显示红点child: Icon(Icons.notifications),
)badges.Badge(position: badges.BadgePosition.topEnd(top: -10,end: -15),onTap: () => debugPrint('onTap'),badgeContent: const Text('3'),badgeAnimation: const badges.BadgeAnimation.scale(animationDuration: Duration(seconds: 2)),badgeStyle: const badges.BadgeStyle(shape: badges.BadgeShape.twitter,),child: const Icon(Icons.notifications),
),

在上面的代码中，我们在通知图标上显示了小红点，代码中的关键位置都添加了注释，以方便大家理解。此外，我们在代码中还使用三方包:Badges.该包也可以在图标
旁边添加小红点。不过它在Badge组件的基础上做了很多扩展，比如响应点击事件，修改红点的样式，以动画的形式显示红点。上面示例代码中演示了该包的使用方法。
编译并且运行上面的程序，就可以在页面中看到通知图标以及它右上角的小红点。我在这里就不演示程序的运行结果了，建议大家自己动手去实战。
看官们，与"如何在图标旁边添加小红点"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!