Flare Flutter动画完成后跳转页面的实现方法问询

嘿，刚好有过类似的实现经验，其实Flare本身就提供了动画状态回调，结合Flutter的路由系统就能完美解决你的需求！下面一步步给你讲清楚：

核心思路 #

Flare的FlareActor组件自带一个callback参数，它会在动画状态发生变化（比如开始、结束）时被触发。我们可以利用这个回调，判断目标动画是否执行完毕，然后调用Flutter的路由方法完成页面跳转。

修改后的代码示例 #

直接调整你的代码，添加回调逻辑即可：

return Scaffold(
  body: Stack(
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                width: 400,
                height: 400,
                alignment: Alignment.center,
                child: FlareActor(
                  "assets/animations/LoadingM.flr",
                  alignment: Alignment.center,
                  fit: BoxFit.contain,
                  color: Colors.blue,
                  animation: _animationL,
                  // 新增动画状态回调
                  callback: (animationName) {
                    // 确认回调触发的是我们要监听的动画
                    if (animationName == _animationL) {
                      // 执行页面跳转，这里替换成你的目标页面
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => const YourTargetPage(),
                        ),
                      );
                      // 如果是启动页这类不需要返回的场景，推荐用pushReplacement
                      // Navigator.of(context).pushReplacement(
                      //   MaterialPageRoute(builder: (context) => const YourTargetPage()),
                      // );
                    }
                  },
                ),
              ),
            ],
          )
        ],
      )
    ],
  ),
);

几个关键注意点 #

• 务必保证_animationL的取值和你Flare文件里的动画名称完全一致，否则回调里的判断会失效。
• 如果你的项目用了命名路由，可以把跳转代码换成Navigator.pushNamed(context, '/your-target-route')，更符合项目的路由规范。
• 要确保context能正确获取到Navigator的上下文，如果当前组件不在导航树里，可以考虑使用GlobalKey来获取导航上下文。

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