0

flutter build webでビルドすると、生成されたindex.htmlを開いても空白から進みません。
flutter runでデバッグ実行すると画面が正しく描画されます。
また、flutter run --releaseでも正しく表示されます。
デバッグもリリースビルドも、ビルドすること自体は成功しています。

コード

コードは特に変えていません。簡略化するためにいくつか書き換えました。

main.dart

void main() async {
    runApp(ProviderScope(child: Example()));
}

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(child: Text("Test")),
      ),
    );
  }
}

index.html

また、web/index<base href="">を様々な形に変更しても結果は変わりませんでした。

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="/">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  .... 以下同じ

flutter doctor -v

Webビルドに関しては特に問題はないように見えます。

[√] Flutter (Channel stable, 3.7.12, on Microsoft Windows [Version 10.0.22621.2134], locale ja-JP)
    • Flutter version 3.7.12 on channel stable at C:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4d9e56e694 (4 months ago), 2023-04-17 21:47:46 -0400
    • Engine revision 1a65d409c7
    • Dart version 2.19.6
    • DevTools version 2.20.1

[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)

[√] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at C:\Users\user1\AppData\Local\Android\sdk
    • Platform android-33, build-tools 33.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 2022.2)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694)

[√] VS Code (version 1.81.1)
    • VS Code at C:\Users\user1\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.70.0

[√] Connected device (2 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 115.0.5790.173
    • Edge (web)   • edge   • web-javascript • Microsoft Edge 115.0.1901.203

[√] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

試したこと

index.htmlのScript内に以下を追記

<script>
     if (platform.name.toLowerCase() == "safari" && 
     parseInt(platform.version.split(".")[0]) >= 15) {
           window.flutterWebRenderer = "html";
            } else { 
              window.flutterWebRenderer = "canvaskit";
            }
</script>

https://stackoverflow.com/questions/75908394/flutter-shows-blank-screen-on-chrome

flutter cleanからのflutter pub get
・Live Serverを用いたローカルサーバーでの実行

https://stackoverflow.com/questions/73359017/flutter-web-release-showing-blank-screen


どなたかわかる方いらっしゃいましたら教えていただけると幸いです。

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。