Flutter GoRouter重启应用后界面无法渲染问题求助

问题现象 #

正常使用应用时，在根路由（/）按下返回键关闭应用符合预期，但重新打开应用后，界面无任何内容渲染——元素实际存在（可通过触摸屏幕与按钮交互），但完全不可见。控制台显示应用未终止执行。

环境配置 #

[√] Flutter (Channel stable, 3.19.0, on Microsoft Windows [Version 10.0.22631.4602], locale en-US)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.11.4)
[√] Android Studio (version 2024.1)
[√] VS Code (version 1.96.2)
[√] Connected device (4 available)
[√] Network resources

关键问题代码 #

问题出在HomePage的动画配置上：

title = title
    .animate(onPlay: (controller) => controller.repeat(reverse: true))
    .saturate(delay: 500.milliseconds, duration: 500.milliseconds)
    .then()
    .blurXY(end: 1)
    .fadeOut();

这段代码给标题文本添加了无限重复的淡出动画，当应用关闭再重启时，动画控制器的状态没有被正确重置，导致文本元素一直处于完全透明的状态，所以肉眼看不见，但元素的布局和交互逻辑依然存在。

解决方案 #

修改动画逻辑，移除fadeOut()或者调整动画的触发方式，避免元素最终处于透明状态。以下是两种可行的修改方式：

方式一：移除淡出动画，保留其他动画效果 #

title = title
    .animate(onPlay: (controller) => controller.repeat(reverse: true))
    .saturate(delay: 500.milliseconds, duration: 500.milliseconds)
    .then()
    .blurXY(end: 1);

方式二：调整动画逻辑，只在特定条件下播放淡出（比如临时提示时） #

如果确实需要淡出效果，可以将动画改为非无限重复，或者添加条件判断控制动画播放：

title = title
    .animate(
        autoPlay: false, // 不自动播放
        onPlay: (controller) => controller.play() // 只播放一次
    )
    .saturate(delay: 500.milliseconds, duration: 500.milliseconds)
    .then()
    .blurXY(end: 1)
    .fadeOut();

额外优化：管理动画生命周期 #

如果手动持有动画控制器，建议在页面销毁时释放资源，避免状态残留：

@override
void dispose() {
  // 若有自定义动画控制器，在此处调用dispose
  super.dispose();
}

验证 #

修改后重新打包测试，关闭应用再重启，界面元素应该能正常显示，同时保留需要的动画效果。

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