如何应用这样的圆形平滑指示器边框？

Question

我想知道如何使用

smooth_page_indicator

包添加这样的边框

我的代码：

             SmoothPageIndicator(
                controller: pageController,
                count: containers.length,
                effect: const ScaleEffect(
                  scale: 1,
                  dotHeight: 9,
                  dotWidth: 9,
                  dotColor: Colors.white,
                  activePaintStyle: PaintingStyle.stroke,
                  strokeWidth: 2,
                ),
              ),

Answer 1

它在他们的文档中。我希望这对您有帮助，您可以更改您想要的颜色。

 ScaleEffect(
   scale: 1.5,
   dotHeight: 10,
   dotWidth: 10,
   dotColor: Colors.blue,
   activeDotColor: Colors.blue,
   activePaintStyle: PaintingStyle.stroke,
   strokeWidth: 2
 )

Answer 2

您还可以尝试CustomizedEffect进行终极控制

       CustomizableEffect(
          dotDecoration: DotDecoration(
            color: Color(0xFFA4A1A1),
            borderRadius: BorderRadius.all(Radius.circular(4)),
          ),
          activeDotDecoration: DotDecoration(
            color: Color(0xFF272522),
            borderRadius: BorderRadius.all(Radius.circular(4)),
            dotBorder: DotBorder(
              color: Color(0xFFE7A356),
              width: 2,
              padding: 3,
            ),
          ),
        )

输出：