

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

# コード

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

### main.dart

[code]

    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")),
          ),
        );
      }
    }
    
[/code]

### index.html

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

[code]

    <!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.">
    
      .... 以下同じ
    
[/code]

# flutter doctor -v

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

[code]

    [√] 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.
    
[/code]

# 試したこと

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

[code]

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

<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>

* * *

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


CC BY-SA 4.0
2023-08-20T13:18:26.880
95991
2023-08-20T13:24:20.853
2023-08-20T13:24:20.853
52417
52417
question
html flutter dart
Flutter Web | デバッグでは正しく描画されるのにリリースビルドでは空白になる