Flutter Web应用发布版首次加载出现二次重载问题求助

问题根源排查 #

1. 动画嵌套触发非预期Widget重建
   原代码中外层TweenAnimationBuilder的builder仅在value == 1.0时返回第二个动画组件，但浮点型动画值的精度问题，可能导致该判断在动画结束时多次触发，或直接引发Widget树重复重建。发布环境下Flutter优化策略更严格，这种重建极易触发页面二次重载。

2. 路由切换的错误写法
   ThisIsFadeRoute的transitionsBuilder直接创建const HomePage()，而非使用传入的child参数。这会导致路由切换时重复初始化HomePage，额外的资源加载或状态重置会加重首次加载负担，甚至触发重载。

3. 动画逻辑放在build方法的隐患
   把动画嵌套在build方法中处理，而非在initState里用独立动画控制器管理，每次build执行都可能重新创建动画实例。发布环境的资源预加载机制与该逻辑冲突，容易引发加载异常。

4. 静态资源加载延迟
   发布环境下SvgPicture.asset的资源可能加载较慢，当动画触发时资源尚未就绪，Flutter Web可能触发页面重载以重新加载资源。

针对性修复措施 #

1. 重构动画逻辑，用独立控制器管理 #

将动画逻辑从build移至initState，用AnimationController统一管理动画序列，避免build时重复创建动画：

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:nagolove/pages/home.dart';

class SplashScreenLogo extends StatefulWidget {
  const SplashScreenLogo({Key? key}) : super(key: key);

  @override
  State<SplashScreenLogo> createState() => SplashScreenLogoState();
}

class SplashScreenLogoState extends State<SplashScreenLogo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    super.initState();
    // 总时长：2500ms等待 + 4000ms缩放动画
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 6500),
    );

    // 延迟2500ms后开始缩放动画
    _scaleAnimation = Tween<double>(begin: 5.0, end: 20.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: const Interval(
          2500/6500,
          1.0,
          curve: Curves.fastLinearToSlowEaseIn,
        ),
      ),
    );

    _controller.forward();
    // 动画结束后跳转首页
    _controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        Navigator.of(context).pushReplacement(ThisIsFadeRoute());
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xff1A2534),
      body: RepaintBoundary(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Center(
              child: Container(
                height: _scaleAnimation.value * 10,
                width: _scaleAnimation.value * 10,
                decoration: BoxDecoration(
                  color: Colors.transparent,
                  border: const Border(left: BorderSide(color: Colors.transparent, width: 3.0)),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.deepPurpleAccent.withOpacity(0.4),
                      blurRadius: 60.0,
                      spreadRadius: 5.0,
                    ),
                  ],
                ),
                child: FittedBox(child: SvgPicture.asset("assets/Svg/splash/Icon.svg")),
              ),
            );
          },
        ),
      ),
    );
  }
}

2. 修复路由切换的错误实现 #

修改ThisIsFadeRoute，使用传入的child参数，避免重复创建HomePage：

class ThisIsFadeRoute extends PageRouteBuilder {
  ThisIsFadeRoute()
      : super(
          pageBuilder: (context, animation, secondaryAnimation) => const HomePage(),
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            return FadeTransition(opacity: animation, child: child);
          },
          transitionDuration: const Duration(milliseconds: 1000),
        );
}

3. 预加载静态资源 #

在启动页初始化时预加载SVG资源，避免动画触发时资源未就绪：

@override
void initState() {
  super.initState();
  // 预加载SVG资源
  precachePicture(
    ExactAssetPicture(SvgPicture.svgStringDecoderBuilder, "assets/Svg/splash/Icon.svg"),
    context,
  );
  // ... 其他动画初始化逻辑
}

额外排查方向 #

• 确认flutter build web --release编译参数正确，无调试代码残留。
• 打开浏览器控制台查看网络请求，确认首次加载时是否有资源重复请求或加载失败，这很可能是二次重载的直接触发点。

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