Flutter Web首次Navigator.push跳转动画卡顿问题求助

针对你遇到的首次跳转卡顿、二次跳转流畅的问题，核心原因是首次加载页面时的组件初始化、资源编译开销挤占了动画帧时间，以下是几个可行的优化方案：

1. 预加载目标页面实例 #

提前在首页初始化InfoPage的实例，避免首次跳转时的实时初始化开销：

late InfoPage _infoPage;

@override
void initState() {
  super.initState();
  // 在首页初始化时提前创建页面实例
  _infoPage = InfoPage();
}

void openInfoScreen() {
  Navigator.push(
    context,
    MaterialPageRoute(page: _infoPage),
  );
}

如果担心影响首页渲染速度，可改用微任务延迟初始化：

InfoPage? _infoPage;

@override
void initState() {
  super.initState();
  Future.microtask(() {
    _infoPage = InfoPage();
  });
}

2. 简化跳转动画复杂度 #

默认的MaterialPageRoute动画包含位移+淡入组合，可改用更轻量的单一动画，并缩短时长，减少动画期间的渲染压力：

void openInfoScreen() {
  Navigator.push(
    context,
    PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => InfoPage(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        // 仅保留淡入动画，降低渲染开销
        return FadeTransition(
          opacity: animation.drive(CurveTween(curve: Curves.easeInOut)),
          child: child,
        );
      },
      transitionDuration: const Duration(milliseconds: 300),
    ),
  );
}

3. 优化目标页面的初始化逻辑 #

检查InfoPage的initState或build方法，将同步耗时操作（如资源解析、大组件初始化）改为异步执行，避免阻塞动画：

class InfoPage extends StatefulWidget {
  @override
  _InfoPageState createState() => _InfoPageState();
}

class _InfoPageState extends State<InfoPage> {
  late Future<void> _initTask;

  @override
  void initState() {
    super.initState();
    // 把耗时操作放到异步任务中
    _initTask = _loadHeavyResources();
  }

  Future<void> _loadHeavyResources() async {
    // 模拟耗时操作：加载本地资源、解析数据等
    await Future.delayed(const Duration(milliseconds: 100));
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _initTask,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        // 页面内容
        return Scaffold(
          appBar: AppBar(title: const Text("Info")),
          body: const Center(child: Text("静态页面内容")),
        );
      },
    );
  }
}

4. 切换到Release模式测试 #

Debug模式下Flutter Web会保留大量调试逻辑，编译开销远高于Release模式，先构建正式版本验证：

flutter build web --release

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