Flutter实现：点击按钮时添加进度对话框的方法

步骤1：添加依赖 #

在项目的pubspec.yaml文件中添加flutter_spinkit依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_spinkit: ^5.2.0 # 可替换为最新版本

执行flutter pub get完成依赖安装。

步骤2：将组件改为StatefulWidget #

由于需要维护加载状态，把当前的无状态组件修改为有状态组件：

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  bool _isLoading = false; // 控制加载状态的变量

  // 你的postRequest网络请求方法（假设已实现）
  Future<http.Response> postRequest() async {
    // 这里填写你的网络请求逻辑
  }

  @override
  Widget build(BuildContext context) {
    // 保留你原有的Scaffold及内部布局代码
    return Scaffold(
      // 你的原有代码...
    );
  }
}

步骤3：修改登录按钮的点击逻辑 #

更新登录按钮的onPressed方法，加入加载状态控制和进度对话框的显示/隐藏逻辑：

onPressed: () async {
  setState(() {
    _isLoading = true; // 标记开始加载
  });

  // 弹出flutter_spinkit进度对话框
  showDialog(
    context: context,
    barrierDismissible: false, // 禁止点击外部关闭对话框
    builder: (context) => const Center(
      child: SpinKitFadingCircle(
        color: Color(0xff2e80e4),
        size: 50.0,
      ),
    ),
  );

  try {
    http.Response response = await postRequest();
    Map<String, dynamic> parsedData = jsonDecode(response.body);
    LoginResponse loginResponse = LoginResponse.fromJson(parsedData);
    
    if (loginResponse.verificationStatus) {
      await Navigator.pushNamed(context, '/home');
    }
  } catch (e) {
    // 处理网络请求异常，比如弹出错误提示
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('登录失败：$e')),
    );
  } finally {
    setState(() {
      _isLoading = false; // 标记加载结束
    });
    Navigator.pop(context); // 关闭进度对话框
  }
},

额外说明 #

• SpinKitFadingCircle是flutter_spinkit提供的动画样式之一，你可以替换为SpinKitWave、SpinKitPulse等其他样式，通过调整color和size参数自定义外观。
• finally块确保无论请求成功还是失败，都会关闭加载状态和对话框，避免出现加载框一直停留的情况。
• barrierDismissible: false可以防止用户在加载过程中误触关闭对话框，提升交互体验。

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