Flutter

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

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

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

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

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

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

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です。

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

まとめ

Flutter webでサイトを作成しているとき、最初に思うことは全然サイト開かないな!です。

Googleによって鋭意改善されていると思いますが、まだロード遅いかなあという感じです。

そこで、本記事で解説したように、ロード中を表すクルクルを表示することで少しでもユーザーが離れてしまうことを防ぐことは非常に重要な対策です。

良いサイトを作成してもユーザーが見てくれなかったら仕方ないですからね。。

是非、本記事を参考にロード中のクルクルを出してみてください。

Flutter学習情報

Flutterを勉強するのに最適な参考書は、以下の「基礎から学ぶFlutter」です。

環境構築から、Dart/Flutterの基本/テストやパフォーマンスチューニングまで一通り学ぶことができます。

また、当ブログではFlutterを初心者が学ぶためにオススメな方法を「Flutter を初心者が学ぶおすすめの勉強法!【間違いない動画があります】」という記事で公開していますので、Flutterに興味がある方は是非読んでみてください。

Flutter を初心者が学ぶおすすめの勉強法!【間違いない動画があります】Flutter 初心者が勉強する場合に、最高の動画をお伝えします。...

動画学習がしたい!という方にオススメの記事がこちらです。

【Udemy】スマホアプリ作成を学ぶときに受講しておきたい講座3選【Flutter】スマホアプリを初めて作成する場合、何らかの教材を見ながら進めると思います。 私は動画で学習するのが好きで、非常に効率よく学ぶことが...

Flutterの将来性はどうなのか?をまとめた記事はこちらです。

【2021/6 更新】Flutterの将来性をトレンドやGoogleの情勢から分析した結果クロスプラットフォーム開発のフレームワークの中で近年注目されているのが「Flutter」です。 私も2020年の4月頃から注目して...