Flutter Web版在Chrome显示空白页，如何展示登录界面？

核心排查步骤 #

• 查看浏览器控制台错误：按F12打开Chrome开发者工具，切换到Console标签页，定位资源加载失败、代码语法错误或权限类报错，这是最直接的问题线索。
• 确认运行模式与方式：
  • 开发环境直接执行flutter run -d chrome启动，不要手动双击打开本地index.html文件（会触发跨域限制）；
  • 若测试编译后的包，先执行flutter build web，再用本地服务器（比如python -m http.server 8080）访问编译后的web目录。
• 检查main.dart入口逻辑：
  • 确保WidgetsFlutterBinding.ensureInitialized()在runApp前调用，避免异步初始化阻塞界面渲染；
  • 排查是否存在平台专属代码（比如Android原生API调用），这类代码在Web环境会报错，需用kIsWeb做平台判断：

    import 'package:flutter/foundation.dart';
    
    void main() {
      WidgetsFlutterBinding.ensureInitialized();
      if (kIsWeb) {
        // Web平台专属初始化逻辑
      } else {
        // Android等其他平台逻辑
      }
      runApp(const MyApp());
    }
    

• 验证依赖兼容性：检查pubspec.yaml中的插件，移除或替换不支持Web平台的依赖，执行flutter pub get后重新编译。
• 清除缓存：Chrome按Ctrl+Shift+R强制刷新，或执行flutter clean清空编译缓存后重新构建项目。

针对未修改自动生成index.html的情况 #

自动生成的<base href="/">在开发环境默认有效，无需修改；若本地直接打开文件测试，可临时改为<base href="./">，但优先推荐用flutter run -d chrome启动。

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