Flutter webでクルクルを出してロード中を表現する方法

絶賛Flutter webにドハマリしています。kazuproです。

Flutter webの弱点に初回のロードが速くないというのがあります。

そんなときに、画面が真っ白ではユーザーが離れてしまいます。

そこでロード中だよということを表す事ができれば、多少はカバーできるかもしれません。

本記事ではFlutter webでロード中を表現するクルクルの出し方を解説していきます。

Contents

Flutter webでロード中のクルクルを表示するステップ
サイトを開いたら画面にロード中を表すクルクルを表示
ロードが完了したら、ロード中を表すクルクルを消す
まとめ
Flutter学習情報

Flutter webでロード中のクルクルを表示するステップ

やることは以下のとおりで、2ステップで実現可能です。

Flutter webで作成したサイトを開いたら画面にロード中を表すクルクルを表示
ロードが完了したら、ロード中を表すクルクルを消す

非常に簡単ですが、ユーザー離れを回避することができるという大きなメリットを得ることができるので、是非とも実装しておきたいですね。

サイトを開いたら画面にロード中を表すクルクルを表示

まずはロード中を表す何かを画面に表示しましょう。

今回はいかにもロードしている感じを出すために、画面の真ん中にクルクルする例のアレを表示します。

ロードしているときは上のクルクルを出していきます。

見た目や色などなどは各自変更可能です。

やることは非常に簡単で、web配下のindex.htmlファイルに以下のソースを書いていきます。

web/index.html

<body>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('flutter-first-frame', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>
　<!-- ここから追加 -->
  <div class="loading">
    <div class="loader"></div>
  </div>
  <!-- ここまで追加 -->
  <script src="main.dart.js" type="application/javascript"></script>
</body>

まずはbody内に、クルクル用のタグを3行追加します。

  <style>
    .loading {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    .loader {
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border: 15px solid ;
      border-top: 16px solid #AFDFE4;
      border-right: 16px solid white;
      border-bottom: 16px solid #AFDFE4;
      border-left: 16px solid white;
      width: 120px;
      height: 120px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

headの終わりの真上に、クルクルを表現するスタイルを追加します。

これでサイトを開くと、クルクルが出るようになります。

ロードが完了したら、ロード中を表すクルクルを消す

次にロードが終わったらクルクルを消します。

今のままだと無限にクルクルが出てしまうので、ロードが完了したらクルクルを消します。

こちらもやり方は非常に簡単で、initState()の最後＝ロード完了時にクルクルのdivタグを削除するだけです。

import 'dart:html';

@override
void initState() {
  super.initState();
  
  // TODO ロード処理
  // ....
  
  // くるくるがあれば除去する
  DivElement loading = querySelector(".loading");
  if (loading != null) loading.remove();
}

dart:htmlでクルクルのdivタグを取得して、削除するだけでOKです。

これでロード中はクルクルを表示し、ロード完了後にクルクルを消すことができました。