Flutter Web页面刷新后无法渲染问题求助

• 问题现象：Flutter Web应用刷新页面后无法渲染，但重启或热重载时能正常加载
• 已做排查：
  • 注释所有第三方依赖和业务代码，简化为最基础的Hello World结构，问题仍存在
  • 新建空白Flutter Web项目无此问题，但将当前项目的主文件代码复制到新项目后，问题重现，推测问题不在主文件本身
  • 已尝试升级Flutter版本，无效

简化后的主文件代码 #

import 'package:flutter/material.dart';
// import 'package:flutter_dotenv/flutter_dotenv.dart';
// import 'package:frontend/utils/constants.dart';
// import 'package:frontend/view_model/auth_view_model.dart';
// import 'package:provider/provider.dart';
// import 'package:firebase_core/firebase_core.dart';
// import 'firebase_options.dart';
// import 'package:frontend/app_router.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

// Future<void> main() async {
//   WidgetsFlutterBinding.ensureInitialized();
//   await dotenv.load(fileName: '.env');

//   await Firebase.initializeApp(
//     options: DefaultFirebaseOptions.currentPlatform,
//   );

//   runApp(MyApp());

//   // runApp(MultiProvider(providers: [
//   //   ChangeNotifierProvider(create: (_) => AuthViewModel()),
//   // ], child: MyApp()));
// }

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Text('Hello World'),
    );
    // return MaterialApp(
    //   title: 'MathNote',
    //   theme: ThemeData(
    //     primarySwatch: Colors.blue,
    //   ),
    //   onGenerateRoute: AppRouter.generateRoute,
    //   initialRoute: homeRoute,
    // );
  }
}

排查方向建议 #

1. 检查web目录配置文件
   • 查看index.html中的脚本引用顺序，确认是否有自定义脚本干扰Flutter初始化流程
   • 核对web/manifest.json和图标资源路径，排查是否存在资源加载失败导致的渲染中断
2. 查看浏览器控制台错误
   • 刷新页面时打开开发者工具（F12），检查Console标签下的JS报错、404资源或CORS错误，这些是页面无法渲染的常见诱因
3. 清理依赖并逐步排查
   • 执行flutter clean后重新构建项目，测试刷新是否正常；若恢复正常，逐个添加依赖包测试，定位兼容性问题
4. 分构建模式测试
   • 分别测试debug模式（flutter run -d chrome）和release模式（flutter build web --release部署后）的刷新行为，确认问题是否仅出现在特定模式
5. 清除浏览器缓存
   • 尝试清除浏览器缓存、禁用缓存后刷新页面，排查是否因历史记录或缓存资源导致的初始化异常
6. 切换渲染模式测试
   • 尝试切换到HTML渲染模式：执行flutter run -d chrome --web-renderer html，确认刷新问题是否消失，排查CanvasKit渲染模式的兼容性问题

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