🔥

【Flutter】Flutter Webをデプロイする時のtips

に公開
Firebase
Flutter
Web
FlutterWeb
hosting
tech

概要

Flutterで作成したアプリをFirebase Hostingで公開した際、今後も必要になりそうなことがいくつかあったのでまとめる。

前提

  • Flutter Webでアプリを開発
  • Firebase Hostingでデプロイ
  • アプリ内でFirestoreとStorageを使用

Storageの画像をFlutter Webで表示する時

公式ドキュメントを参考に、Storageに保存されている画像をアプリ内で表示する機能を実装しようとしたが、画像が読み込めなかった。
この時確認したこととしては、

  • フォルダパス、ファイル名
  • Firebase Storageのアクセスルール

また、Firebaseの構成コマンドflutterfire configureをやり直してみたり、お馴染みのflutter cleanしてみたり。

解決

決定的な解決策が提示されているサイトを見つけた。
Google CloudコンソールでCORSファイルというのを設定すればいいらしい。

https://medium.com/@zam.connected/flutter-images-not-showing-7b85283185e6

ローディング対策

Flutter Webで開発したページは、重い。
その上デフォルトでは、初回の読み込み中に真っ白な画面が表示されてしまい、ユーザーからはサイトに不具合があって開けないページにも見えてしまう。

対策

最初のHTML読み込み時に、スプラッシュ画面を表示する機能を実装する。

スプラッシュ画面で表示するアニメーションはLottieからダウンロードした。

https://lottiefiles.com/jp/

ダウンロードしたjsonファイルをwebフォルダに配置し、Flutterプロジェクト内のweb/index.htmlにコードを追加。

index.html
<!DOCTYPE html>
<html>

<head>
/* 省略 */
  <style>
    /* スプラッシュ用スタイル */
    #splash {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffffff;
      z-index: 9999;
    }

    #lottie {
      width: 120px;
      height: 120px;
    }
  </style>
</head>

<body>
  <div id="splash">
    <div id="lottie" aria-hidden="true"></div>
  </div>

  <!-- lottie-web: CDN -->
  <script src="https://unpkg.com/lottie-web@5.10.0/build/player/lottie.min.js"></script>
  <script>
    // lottieのjson は web/ フォルダに配置
    var animation = lottie.loadAnimation({
      container: document.getElementById('lottie'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: 'YOUR_LOTTIE_FILE.json'
    });

    // Flutter が最初のフレームを描画したらスプラッシュをフェードアウトして削除
    window.addEventListener('flutter-first-frame', function () {
      var splash = document.getElementById('splash');
      if (!splash) return;
      splash.style.transition = 'opacity 300ms ease';
      splash.style.opacity = '0';
      setTimeout(function () {
        splash.remove();
      }, 350);
    });
  </script>

  <script src="flutter_bootstrap.js" async></script>
</body>

</html>

Discussion