如何在Flutter中创建替换IconButton的LinearProgressIndicator以显示页面跳转进度

直接把IconButton换成带点击触发动画的LinearProgressIndicator就行，核心是用动画控制器模拟（或绑定真实加载任务的）进度，进度完成后自动跳转。下面是完整的改造代码：

class YourPage extends StatefulWidget {
  const YourPage({super.key});

  @override
  State<YourPage> createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> with SingleTickerProviderStateMixin {
  late AnimationController _progressController;
  late Animation<double> _progressAnimation;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，时长根据实际加载耗时调整，这里设为3秒
    _progressController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 3),
    );
    // 创建从0到1的进度动画
    _progressAnimation = Tween<double>(begin: 0, end: 1).animate(_progressController)
      ..addStatusListener((status) {
        // 动画完成时跳转到下一页
        if (status == AnimationStatus.completed) {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => const setup6()),
          );
          // 重置控制器，方便下次点击
          _progressController.reset();
        }
      });
  }

  @override
  void dispose() {
    _progressController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 其他页面内容...
      body: Center(
        // 用GestureDetector包裹进度条，实现点击触发加载
        child: GestureDetector(
          onTap: () {
            // 只有在动画未运行时才启动
            if (!_progressController.isAnimating) {
              _progressController.forward();
            }
          },
          child: LinearProgressIndicator(
            value: _progressAnimation.value,
            color: Colors.blue,
            backgroundColor: Colors.grey[300],
            minHeight: 20, // 调整进度条高度，匹配原来按钮的视觉大小
          ),
        ),
      ),
    );
  }
}

关键说明： #

• 如果是真实的异步加载任务（比如请求接口、加载本地资源），不用模拟动画时长，而是手动绑定进度：

  1. 去掉AnimationController的duration配置
  2. 在加载任务中，根据实际进度调用_progressController.value = 当前进度值（0-1区间）
  3. 加载完成后直接触发页面跳转

• 进度条的样式可以通过minHeight、color、backgroundColor调整，匹配你原来按钮的视觉风格

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