😇

Flutter3.22にしたら、Webが表示されなくなった

2024/07/20に公開

Flutter

Web

tech

そろそろ、Flutter Webで作ったアプリのFlutterバージョンを3.22にアップしとくか。
お、ビルドしたら Warning 出てるけど、Error じゃないから大丈夫やろ。ビルドしてデプロイっと・・・

はい、ページが真っ白で何も表示されなくなりました😇

表示されたWarning

Warningでも安易に無視したらダメですね。表示された Warning は、下記の通りです。

1つめのWarning

Local variable for "serviceWorkerVersion" is deprecated. Use
"{{flutter_service_worker_version}}" template token instead.

serviceWorkerVersionが使えなくなったら、他の使ってくれよな！って言ってますね。

2つめのWarning

"FlutterLoader.loadEntrypoint" is deprecated. Use "FlutterLoader.load" instead.

こちらもloadEntryPointが使えなくなったから、load使ってくれよな！って言ってますね。

対応内容

Warning で吐き出された以外にも修正箇所があったので（自分のコードは）、修正箇所の全容を下記にまとめます。

web/index.html

  <head>
   ...（省略）...
   <script>
-    // The value below is injected by flutter build, do not touch.
-    const serviceWorkerVersion = null;
+    var serviceWorkerVersion = '{{flutter_service_worker_version}}';
   </script>
-  <!-- This script adds the flutter initialization JS code -->
-  <script src="flutter.js" defer></script>
 </head>
 <body>
   <script>
     window.addEventListener('load', function(ev) {
-      // Download main.dart.js
-      _flutter.loader.loadEntrypoint({
+      {{flutter_js}}
+      {{flutter_build_config}}
+
+      _flutter.loader.load({
         serviceWorker: {
           serviceWorkerVersion: serviceWorkerVersion,
         },
         ...（省略）...
    </script>
  </body>

中括弧2つ{{}}って、あんまり見ないよなと思って調べてみたら、Vue.jsの構文？
Vue.js使ってるのか？（しらんけど）

とりあえず、上記の修正でビルドしたら、無事にWebが表示されるようになりました。