如何实现带边框的滚动指示点（SmoothPageIndicator）

我希望实现带边框的滚动指示点效果，但当前使用SmoothPageIndicator的ScaleEffect生成的效果不符合预期，现有代码如下：

SmoothPageIndicator(   
    controller: controller,
    count: 3,
    effect:  const  ScaleEffect(
        scale: 1.5,
        dotHeight: 10,
        dotWidth: 10,
        dotColor: Colors.red,
        activeDotColor: Colors.grey,
        activePaintStyle: PaintingStyle.stroke,
        strokeWidth: 2
    ),
    onDotClicked: (index) {
        controller.animateToPage(index,
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut);
    },
)

解决方案 #

想要实现带边框的选中指示点，推荐使用CustomizableEffect替代ScaleEffect，它能更灵活地自定义每个状态下的点样式：

SmoothPageIndicator(
  controller: controller,
  count: 3,
  effect: CustomizableEffect(
    // 激活状态的点：透明背景+灰色边框
    activeDotDecoration: const DotDecoration(
      width: 12,
      height: 12,
      color: Colors.transparent,
      border: Border.all(color: Colors.grey, width: 2),
    ),
    // 非激活状态的点：实心红色
    dotDecoration: const DotDecoration(
      width: 10,
      height: 10,
      color: Colors.red,
    ),
    spacing: 8.0, // 点之间的间距
    activeScale: 1.2, // 激活点的缩放比例
  ),
  onDotClicked: (index) {
    controller.animateToPage(
      index,
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  },
)

代码说明 #

• 非激活点设置为实心红色，保持基础尺寸10x10
• 激活点使用透明背景+灰色边框，尺寸放大到12x12，配合缩放效果突出选中状态
• 可根据需求调整边框颜色、宽度，以及点的尺寸和间距，完全匹配预期样式

内容的提问来源于stack exchange，提问作者ELMOURABIT OJ