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

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

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

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

直接上源码

/// @author bawomingtian
/// @date 2023/10/16
/// @desc 通过监听路由入场动画完成，判断路由完全进入，可以用来优化在进场动画执行过程中
/// 异步请求数据刷新界面，导致进场动画卡顿的问题
class AsyncState<T extends StatefulWidget> extends State<T> {Completer<bool> resumeCompleter = Completer();@overridevoid 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);}@overrideWidget build(BuildContext context) {return const SizedBox();}
}

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

下面贴一下使用方法

class _TestState extends AsyncState<Object> {......@overridevoid initState() {WidgetsBinding.instance.addPostFrameCallback((timeStamp) async {asyncWaitResume(loadUserList()).then((value){......});});super.initState();}@overrideWidget build(BuildContext context) {......}

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