Flutter Web（Chrome）运行项目无内容显示问题求助

运行Flutter Web项目时Chrome窗口空白，官方示例代码也复现该问题，结合flutter doctor的网络超时检测结果，可按以下步骤排查：

1. 优先解决网络连接问题 #

多个核心资源域名超时会直接影响Flutter Web的资源加载（如引擎文件、字体、依赖包）：

• 确认本地网络可正常访问pub.dev、storage.googleapis.com等域名，若在日本可尝试切换网络环境（如手机热点）
• 关闭本地代理、防火墙，避免请求被拦截
• 执行以下命令重置缓存并重新获取依赖：

  flutter clean
  flutter pub get
  flutter run -d chrome
  

2. 排查Chrome浏览器问题 #

• 按F12打开开发者工具，查看Console标签页的报错信息（如资源加载失败、JS执行错误）
• 用无痕模式启动项目，排除缓存或扩展干扰：

  flutter run -d chrome --web-browser-flag="--incognito"
  

• 更新Chrome到最新版本，或重置浏览器设置

3. 验证Flutter Web环境与配置 #

• 查看详细日志定位超时环节：flutter doctor -v
• 切换到稳定分支并升级Flutter：

  flutter channel stable
  flutter upgrade
  

• 检查项目web/index.html，确认main.dart.js引用路径正确
• 构建生产版本测试：

  flutter build web
  # 用本地服务器打开构建后的文件，例如Python
  python -m http.server 8080
  # 访问http://localhost:8080查看效果
  

附：你的代码与检测结果 #

main.dart 代码

// Copyright 2019 the Dart project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license
// that can be found in the LICENSE file.

import 'dart:math' as math;

import 'package:flutter/material.dart';

const int maxSeeds = 250;

void main() {
  runApp(const Sunflower());
}

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

  @override
  State<StatefulWidget> createState() {
    return _SunflowerState();
  }
}

class _SunflowerState extends State<Sunflower> {
  int seeds = maxSeeds ~/ 2;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.dark,
        appBarTheme: const AppBarTheme(elevation: 2),
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Sunflower'),
        ),
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Expanded(
                child: SunflowerWidget(seeds),
              ),
              const SizedBox(height: 20),
              Text('Showing ${seeds.round()} seeds'),
              SizedBox(
                width: 300,
                child: Slider(
                  min: 1,
                  max: maxSeeds.toDouble(),
                  value: seeds.toDouble(),
                  onChanged: (val) {
                    setState(() => seeds = val.round());
                  },
                ),
              ),
              const SizedBox(height: 20),
            ],
          ),
        ),
      ),
    );
  }
}

class SunflowerWidget extends StatelessWidget {
  static const tau = math.pi * 2;
  static const scaleFactor = 1 / 40;
  static const size = 600.0;
  static final phi = (math.sqrt(5) + 1) / 2;
  static final rng = math.Random();

  final int seeds;

  const SunflowerWidget(this.seeds, {super.key});

  @override
  Widget build(BuildContext context) {
    final seedWidgets = <Widget>[];

    for (var i = 0; i < seeds; i++) {
      final theta = i * tau / phi;
      final r = math.sqrt(i) * scaleFactor;

      seedWidgets.add(AnimatedAlign(
        key: ValueKey(i),
        duration: Duration(milliseconds: rng.nextInt(500) + 250),
        curve: Curves.easeInOut,
        alignment: Alignment(r * math.cos(theta), -1 * r * math.sin(theta)),
        child: const Dot(true),
      ));
    }

    for (var j = seeds; j < maxSeeds; j++) {
      final x = math.cos(tau * j / (maxSeeds - 1)) * 0.9;
      final y = math.sin(tau * j / (maxSeeds - 1)) * 0.9;

      seedWidgets.add(AnimatedAlign(
        key: ValueKey(j),
        duration: Duration(milliseconds: rng.nextInt(500) + 250),
        curve: Curves.easeInOut,
        alignment: Alignment(x, y),
        child: const Dot(false),
      ));
    }

    return FittedBox(
      fit: BoxFit.contain,
      child: SizedBox(
        height: size,
        width: size,
        child: Stack(children: seedWidgets),
      ),
    );
  }
}

class Dot extends StatelessWidget {
  static const size = 5.0;
  static const radius = 3.0;

  final bool lit;

  const Dot(this.lit, {super.key});

  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: lit ? Colors.orange : Colors.grey.shade700,
        borderRadius: BorderRadius.circular(radius),
      ),
      child: const SizedBox(
        height: size,
        width: size,
      ),
    );
  }
}

flutter doctor 检测结果

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.24.3, on Microsoft Windows [Version 10.0.22631.4460], locale ja-JP)
[√] 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 Professional 2022 17.10.5)
[√] Android Studio (version 2024.1)
[√] IntelliJ IDEA Community Edition (version 2024.2)
[√] VS Code (version 1.95.1)
[√] Connected device (3 available)
[!] Network resources
    X A network error occurred while checking "https://pub.dev/": Semaphore timed out.

    X A network error occurred while checking "https://storage.googleapis.com/": Semaphore timed out.

    X A network error occurred while checking "https://maven.google.com/": Semaphore timed out.

    X A network error occurred while checking "https://cocoapods.org/": Semaphore timed out.

    X A network error occurred while checking "https://github.com/": Semaphore timed out.


! Doctor found issues in 1 category.

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