如何使用smooth_page_indicator实现圆形平滑边框页面指示器

直接调整SmoothPageIndicator的ScaleEffect参数即可实现目标空心圆环指示器效果，你现有代码的问题有3个：

• 未显式指定activeDotColor，会使用包默认的靛蓝色作为激活态颜色，和你要的白色边框不符
• scale参数设为1，激活态圆环尺寸和非激活实心点差异太小，空心效果不明显
• 未设置radius参数，默认圆角半径不足，绘制出来的点不是正圆形

调整后的完整代码如下：

SmoothPageIndicator(
  controller: pageController,
  count: containers.length,
  effect: const ScaleEffect(
    scale: 1.4, // 控制激活圆环的大小，可在1.3~1.5之间微调匹配设计稿
    dotHeight: 9,
    dotWidth: 9,
    radius: 4.5, // 设为宽/高的一半，保证绘制正圆形
    dotColor: Colors.white,
    activeDotColor: Colors.white, // 显式指定激活态边框为白色
    activePaintStyle: PaintingStyle.stroke,
    strokeWidth: 2, // 控制圆环边框粗细
  ),
)

参数微调说明 #

• 如果想要圆环更大，可以适当调大scale值，反之调小
• 如果想要边框更粗/细，对应调整strokeWidth即可
• 如果你的页面背景不是纯色，也不需要额外处理，激活态圆环中间默认透明，会直接透出底层内容

内容的提问来源于stack exchange，提问作者Hama Sabah