如何实现切换页面后将前一页SmoothPageIndicator的点颜色改为白色

需求：切换到第二页后，第一页对应的SmoothPageIndicator指示器点变为白色。当前使用WormEffect无法实现该效果，之前的尝试会导致切换到第二页时所有指示器点都变为白色。

解决方案 #

SmoothPageIndicator的WormEffect不支持单独设置单个非活动dot的颜色，需要改用CustomizableEffect，它允许为每个dot单独定义样式。

修改后的核心代码 #

1. 添加方法判断每个dot的颜色：

Color _getDotColor(int index) {
  // 当当前页面是第二页(index=1)，且当前dot对应第一页(index=0)时，显示白色
  if (currentIndex == 1 && index == 0) {
    return colorWhite;
  }
  // 其他情况使用预设的对应页面颜色
  return dotColors[index];
}

2. 替换SmoothPageIndicator的effect为CustomizableEffect：

SmoothPageIndicator(
  controller: pageController,
  count: 4,
  effect: CustomizableEffect(
    activeDotDecoration: DotDecoration(
      color: colorWhite,
      height: 4,
      width: 90,
    ),
    // 为每个dot单独设置样式
    dotDecoration: (index) => DotDecoration(
      color: _getDotColor(index),
      height: 4,
      width: 90,
    ),
  ),
)

完整修改后的State类 #

class _OnBoardingPageState extends State<OnBoardingPage> {
  PageController pageController = PageController();
  List<Color> dotColors = [
    Color.fromARGB(255, 123, 212, 254),
    Color.fromARGB(255, 255, 200, 78),
    Color.fromARGB(255, 229, 115, 148),
    colorWhite,
  ];

  bool heightPagePassed = true;
  bool weightPagePassed = true;
  bool bloodPagePassed = true;
  bool yearsPagePassed = true;

  int currentIndex = 0;

  @override
  void initState() {
    super.initState();
    pageController = PageController();
  }

  Color _getDotColor(int index) {
    if (currentIndex == 1 && index == 0) {
      return colorWhite;
    }
    return dotColors[index];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            PageView(
              // physics: NeverScrollableScrollPhysics(),
              controller: pageController,
              children: const [
                HeightPage(pageController: pageController),
                WeightPage(pageController: pageController),
                BloodPage(pageController: pageController),
                YearsPage(),
              ],
              onPageChanged: (index) {
                setState(() {
                  currentIndex = index;
                });
              },
            ),
            Container(
              alignment: const Alignment(0, -0.85),
              child: SmoothPageIndicator(
                controller: pageController,
                count: 4,
                effect: CustomizableEffect(
                  activeDotDecoration: DotDecoration(
                    color: colorWhite,
                    height: 4,
                    width: 90,
                  ),
                  dotDecoration: (index) => DotDecoration(
                    color: _getDotColor(index),
                    height: 4,
                    width: 90,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

说明 #

• CustomizableEffect的dotDecoration参数通过函数回调，能根据每个dot的索引动态返回样式，实现单个点的颜色自定义。
• 逻辑判断仅在当前页面为第二页时，将第一页对应的dot设为白色，其他场景保持原有颜色逻辑，避免出现所有点变白的问题。

内容的提问来源于stack exchange，提问作者Назар Марцінко