在Flutter 实际开发过程中，页面数据往往是异步加载，接口请求回来后，数据刷新显示到界面上。

由于Flutter性能原因，也可能因为获取数据量比较大，在新页面路由进场动画执行过程中，接口请求结果回来了，很可能在进场动画执行过程中，刷新界面，导致进场动画卡顿。

那可不可以实现在路由进场完成后，再去请求数据，刷新界面呢，很遗憾官方没有类似的监听，官方提供的路由状态监听，是在调用push切换路由时，立即生效，和我们的期望不一致。

在查看了Flutter 源码，发现了一个取巧的方案，提供给大家。

直接上源码

/// @author bawomingtian
/// @date 2023/10/16
/// @desc 通过监听路由入场动画完成，判断路由完全进入，可以用来优化在进场动画执行过程中
/// 异步请求数据刷新界面，导致进场动画卡顿的问题
class AsyncState<T extends StatefulWidget> extends State<T> {
  Completer<bool> resumeCompleter = Completer();
  @override
  void didChangeDependencies() {
    ModalRoute.of(context)!.controller?.addStatusListener((status) {
      if(status==AnimationStatus.completed){
        initAsyncLoad();
      }
    });
    super.didChangeDependencies();
  }

  ///子类可以在initState 请求接口
  ///该方法主要目的为：路由动画执行结束后，再返回结果
  ///可以提前预加载数据，加快内容显示
  Future<dynamic> asyncWaitResume(Future<dynamic> future) async {
    var value = await Future.wait([future,resumeCompleter.future]);
    return value.first;
  }

  ///入场路由动画执行完成，新入场页面完全进入
  void initAsyncLoad(){
    resumeCompleter.complete(true);
  }

  @override
  Widget build(BuildContext context) {
    return const SizedBox();
  }
}

原理很简单，通过监听入场动画的状态来判断路由状态

下面贴一下使用方法

class _TestState extends AsyncState<Object> {

 ......

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {
      asyncWaitResume(loadUserList()).then((value){
        ......
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    ......
  }

这样可以很方便的请求接口刷新界面，不用担心入场动画卡顿