Flutter实现按钮点击后显示进度圈直至API请求完成

步骤1：切换为StatefulWidget（若当前是StatelessWidget） #

要管理加载状态，需要把你的组件改成StatefulWidget，这样才能通过状态更新触发UI变化。

步骤2：添加加载状态变量 #

在State类里定义一个布尔变量，用来控制进度圈的显示与隐藏：

bool _isLoading = false;

步骤3：修改按钮与请求逻辑 #

根据加载状态切换按钮内容，同时在请求流程中更新状态，还要处理异常避免UI卡死：

ElevatedButton(
  onPressed: _isLoading ? null : () async {
    setState(() {
      _isLoading = true; // 开始请求，显示进度圈
    });

    try {
      Map data = {
        // 你的请求数据
      };
      var body = json.encode(data);
      var response = await http.post(
        Uri.parse("***MY API URL ***"),
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json"
        },
        body: body);

      if (response.statusCode == 200 || response.statusCode == 201) {
        print('success');
        Toast.show("Success", context);
        
        Navigator.pushAndRemoveUntil(
          context,
          MaterialPageRoute(
            builder: (BuildContext context) => const HomePage(),
          ),
          (route) => false,
        );
      } else {
        Toast.show("ERROR! Please try again.", context);
      }
    } catch (e) {
      // 捕获网络异常或其他请求错误
      Toast.show("Network error! Please check your connection.", context);
      print("Request error: $e");
    } finally {
      setState(() {
        _isLoading = false; // 请求结束，隐藏进度圈
      });
    }
  },
  child: _isLoading 
      ? const CircularProgressIndicator(color: Colors.white) // 加载中显示进度圈
      : const Text("提交请求"), // 正常状态显示按钮文本
)

核心细节说明 #

• 防止重复点击：加载状态下把onPressed设为null，按钮会自动变为禁用状态，避免用户多次触发请求。
• 状态驱动UI：通过setState更新_isLoading的值，Flutter会自动重绘按钮内容。
• 异常兜底：用try-catch-finally包裹请求逻辑，确保无论请求成功、失败还是报错，进度圈都会被隐藏，不会让UI一直停留在加载状态。

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