如何在Flutter中为异步执行进程便捷实现轻量进度条显示？

核心思路 #

在进程/异步函数运行时显示进度条，核心是通过状态变量控制UI切换：用一个布尔值标记是否处于加载状态，在异步任务开始时设置为true（显示进度条），任务结束后重置为false（恢复原UI）。Flutter原生的StatefulWidget+setState就是最轻量化的实现方式，无需额外依赖。

完整示例代码 #

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

  @override
  State<AuthPage> createState() => _AuthPageState();
}

class _AuthPageState extends State<AuthPage> {
  bool _isLoading = false;
  bool _isLogin = true;

  // 模拟登录/注册异步操作
  Future<void> handleSubmit() async {
    setState(() => _isLoading = true);
    
    // 替换为实际的网络请求或耗时操作
    await Future.delayed(const Duration(seconds: 2));

    setState(() => _isLoading = false);
    
    // 操作完成后的逻辑，比如页面跳转、提示弹窗
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _isLoading
            // 加载时显示圆形进度条
            ? const CircularProgressIndicator()
            // 非加载状态显示操作按钮
            : ElevatedButton(
                onPressed: handleSubmit,
                child: Text(_isLogin ? 'Login' : 'Register'),
              ),
      ),
    );
  }
}

进阶：按钮内嵌入进度条 #

如果希望保持按钮位置不变，加载时在按钮内显示小进度条，可以修改按钮的child和onPressed属性：

ElevatedButton(
  // 加载时禁用按钮
  onPressed: _isLoading ? null : handleSubmit,
  child: _isLoading
      ? const SizedBox(
          width: 20,
          height: 20,
          child: CircularProgressIndicator(
            strokeWidth: 2,
            valueColor: AlwaysStoppedAnimation(Colors.white),
          ),
        )
      : Text(_isLogin ? 'Login' : 'Register'),
)

其他进度条样式 #

Flutter原生提供多种轻量级进度条组件，可按需替换：

• LinearProgressIndicator：水平线性进度条
• CircularProgressIndicator：圆形进度条（默认）
• 自定义样式：通过color、strokeWidth等属性调整外观

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