如何实现如图所示的Flutter页面滑动指示器？有无可用第三方开发包？

1. 指示器名称 #

这款指示器的通用名称是平滑过渡页面点指示器，也常被称为带动画效果的页面滑动指示点，核心特征是页面切换时选中态的指示点会跟随滑动动作做平滑的位移动画，同时未选中的指示点同步触发大小、透明度的过渡效果。

2. Flutter 原生实现思路 #

如果不想引入第三方依赖，可以按以下思路自行实现：

• 用 PageView 承载滑动页面内容，通过 PageController 监听页面的实时滚动偏移
• 自定义指示器组件，使用 CustomPaint 绘制所有指示点，根据PageController返回的滚动进度，实时计算选中态圆点的位置、大小，以及未选中圆点的缩放、透明度参数
• 直接将页面滚动偏移量作为动画输入，不需要额外声明 AnimationController，即可实现指示器和页面滑动完全同步的跟随效果

核心代码参考片段：

// 初始化Page控制器
final PageController pageController = PageController();
// 监听滚动事件，实时更新指示器状态
pageController.addListener(() {
  final double currentOffset = pageController.page ?? 0;
  // 用当前滚动偏移计算各指示点的绘制参数
});

// CustomPaint绘制逻辑示例
@override
void paint(Canvas canvas, Size size) {
  const double dotRadius = 4;
  const double selectedDotRadius = 6;
  const double spaceBetweenDots = 16;
  // 先绘制所有未选中的指示点
  for (int i = 0; i < totalPageCount; i++) {
    final double scale = (i == currentOffset.floor()) ? 1 : 0.6;
    canvas.drawCircle(
      Offset(i * spaceBetweenDots + dotRadius, size.height / 2),
      dotRadius * scale,
      unselectedDotPaint,
    );
  }
  // 绘制跟随滚动的选中态指示点
  final double selectedX = currentOffset * spaceBetweenDots + selectedDotRadius;
  canvas.drawCircle(
    Offset(selectedX, size.height / 2),
    selectedDotRadius,
    selectedDotPaint,
  );
}

3. 第三方包推荐 #

如果需要快速实现效果，可以直接使用以下成熟的第三方库：

• smooth_page_indicator：目前Flutter生态中最常用的点式指示器库，内置了包含平滑平移在内的多种预设动画效果，仅需配置少量参数即可实现图中效果，不需要自定义绘制逻辑
• dots_indicator：轻量级的指示器库，支持自定义圆点大小、间距、动画时长，配置灵活，也可以快速实现该滑动效果

内容的提问来源于stack exchange，提问作者Fsd Ramjan