Flutter应用启动多API请求时百分比进度指示器实现求助

核心逻辑很直白，就是基于已完成的API数量/总API数量来计算进度，具体实现步骤如下：

1. 定义基础变量 #

• 先明确启动时需要调用的API总数量，比如你要调用4个API，就设totalApis = 4
• 维护一个计数器completedApis，初始值为0，每完成一个API请求（成功/失败都算完成，避免进度卡住）就把计数器加1

2. 计算进度百分比 #

每次completedApis更新时，用这个公式计算：

double progressPercent = (completedApis / totalApis) * 100;

比如完成2个API，就是(2/4)*100=50%，直接把这个值传给percent_indicator组件即可。

3. 具体代码示例（Flutter场景） #

class _SplashPageState extends State<SplashPage> {
  int totalApis = 3; // 假设启动时要调用3个API
  int completedApis = 0;
  double currentProgress = 0.0;

  @override
  void initState() {
    super.initState();
    _loadAllData();
  }

  void _loadAllData() async {
    // 并行发起所有API请求
    await Future.wait([
      _fetchUserInfo(),
      _fetchSystemConfig(),
      _fetchHomeBanner(),
    ]);
    // 所有请求完成后，可跳转首页或做其他操作
  }

  Future<void> _fetchUserInfo() async {
    try {
      // 发起API请求
      await http.get(Uri.parse('https://your-api/user'));
    } catch (e) {
      // 处理异常，比如打日志
      print('用户信息请求失败: $e');
    } finally {
      // 无论成败都更新进度
      setState(() {
        completedApis++;
        currentProgress = (completedApis / totalApis) * 100;
      });
    }
  }

  Future<void> _fetchSystemConfig() async {
    try {
      await http.get(Uri.parse('https://your-api/config'));
    } catch (e) {
      print('系统配置请求失败: $e');
    } finally {
      setState(() {
        completedApis++;
        currentProgress = (completedApis / totalApis) * 100;
      });
    }
  }

  Future<void> _fetchHomeBanner() async {
    try {
      await http.get(Uri.parse('https://your-api/banner'));
    } catch (e) {
      print('首页 banner 请求失败: $e');
    } finally {
      setState(() {
        completedApis++;
        currentProgress = (completedApis / totalApis) * 100;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CircularPercentIndicator(
          radius: 60.0,
          lineWidth: 5.0,
          percent: currentProgress / 100, // 注意percent_indicator接收0-1的小数
          center: Text("${currentProgress.toInt()}%"),
          progressColor: Colors.blue,
        ),
      ),
    );
  }
}

额外注意点 #

• 必须在finally块里更新计数器，确保哪怕API请求失败，进度也能正常推进，不会卡在某个百分比
• 如果是串行调用API（比如必须等前一个请求完成才发起下一个），逻辑完全一致，每个请求结束后更新计数器即可
• 如果不同API的权重不一样（比如某个API数据量极大，想让它占更高的进度占比），可以给每个API设置权重值，总任务数改成权重总和，完成时加对应权重。比如API1权重2，API2权重1，总权重3，完成API1就加2，进度就是2/3≈66.7%

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