Flutter 如何在FutureBuilder中为时长未知的异步任务设置确定式加载进度

在无法拿到实际加载进度、也无法预估Future总执行时长的场景下，本来就无法实现100%精确的进度展示，可以根据需求从以下两种方案中选择：

方案1：使用原生不确定进度指示器 #

Flutter自带的CircularProgressIndicator、LinearProgressIndicator默认就支持不确定进度模式，不需要传入value参数，组件会自动展示循环加载动画，普通用户完全可以理解当前处于加载状态，不需要额外修改逻辑。
你可以直接替换原来的LoadingBar组件：

FutureBuilder(
  future: getSoilData(context),
  builder: (BuildContext context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return makeBody();
    }
    // 不传value参数就是不确定进度模式
    return const CircularProgressIndicator();
  },
),

这个方案的优势是完全不需要额外开发，也不会出现进度和实际加载状态不符的问题，是优先推荐的选择。

方案2：实现伪进度提升用户感知 #

如果产品要求必须展示进度变化，可以通过模拟进度的方式实现：先让进度按照预设的曲线快速增长到80%~90%的位置停留，等实际Future执行完成后再直接跳到100%，再切换到成功页面，用户感知上会觉得加载进度在持续推进，体验比固定的循环动画更好。
你可以封装一个通用的伪进度加载组件替换原有FutureBuilder：

class FakeProgressLoader extends StatefulWidget {
  final Future Function() future;
  final Widget Function(dynamic data) successBuilder;

  const FakeProgressLoader({
    super.key,
    required this.future,
    required this.successBuilder,
  });

  @override
  State<FakeProgressLoader> createState() => _FakeProgressLoaderState();
}

class _FakeProgressLoaderState extends State<FakeProgressLoader> with SingleTickerProviderStateMixin {
  late AnimationController _progressController;
  dynamic _resultData;
  bool _isFutureCompleted = false;

  @override
  void initState() {
    super.initState();
    // 动画总时长可以根据你的接口平均耗时调整，比如这里设为5秒
    _progressController = AnimationController(vsync: this, duration: const Duration(seconds: 5));
    // 用easeOut曲线实现前快后慢的增长效果，更符合真实加载的感知
    CurvedAnimation(parent: _progressController, curve: Curves.easeOut);
    // 进度先增长到90%的位置停留
    _progressController.animateTo(0.9);
    // 执行实际异步请求
    widget.future().then((value) {
      setState(() {
        _isFutureCompleted = true;
        _resultData = value;
      });
      // 请求完成后进度跳到100%
      _progressController.animateTo(1.0, duration: const Duration(milliseconds: 300)).whenComplete(() {
        setState(() {});
      });
    });
  }

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

  @override
  Widget build(BuildContext context) {
    // 进度到100%且请求完成时切换到成功页
    if (_isFutureCompleted && _progressController.value >= 1.0) {
      return widget.successBuilder(_resultData);
    }
    return AnimatedBuilder(
      animation: _progressController,
      builder: (context, child) {
        return CircularProgressIndicator(
          value: _progressController.value,
        );
      },
    );
  }
}

调用方式如下：

FakeProgressLoader(
  future: () => getSoilData(context),
  successBuilder: (data) => makeBody(),
)

使用该方案需要注意两个点：

• 动画总时长可以根据你的接口实际平均耗时调整，比如接口平均2秒返回就把时长设为3秒，大部分场景下进度还没走到90%接口就会返回，真实感更强
• 建议给异步请求加超时逻辑，超时后展示加载失败提示，避免进度一直停在90%的位置

内容的提问来源于stack exchange，提问作者L.Goyal