虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

FlutterでShimmerエフェクトを出す

f:id:superman199323:20181014195528p:plain

FlutterでShimmerエフェクトを出す

Youtubeや、FaceBookで使われている画面読み込み中のレイアウトである「Shimmerエフェクト」をFlutterで実装する方法について書いていきます。

プラグインの導入

この画面読み込み中レイアウトは下記のプラグインを導入することで実装できます。

pub.dartlang.org

pubspec.yml を編集します。

dependencies:
  flutter:
    sdk: flutter

  shimmer: ^0.0.5

バージョンは適宜変更してください。

実装

このプラグインはユーザーが自由にレイアウトを設定することができるので、状況に合わせて実装していくといいと思います。

ポイントは Shimmer.fromColors にプログレスの色と、 child 属性にプログレスさせたい形のレイアウトを組んでいくことになります。

一例としてGroupAlbumの中で動いているコードを貼っておきます。

Widget _progressGroupLayout() {
    double width = MediaQuery.of(context).size.width;
    double shimmerWidth = width * 0.5;

    Color baseColor = Colors.grey[300];
    Color highLightColor = Colors.grey[100];

    return SizedBox(
      width: 200.0,
      height: 100.0,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Shimmer.fromColors(
            baseColor: baseColor,
            highlightColor: highLightColor,
            child: CircleImageUtil.circleAssets(
                "assets/whiteDefault.png", 100.0, 100.0, EdgeInsets.all(10.0)),
          ),
          const SizedBox(width: 10.0),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Shimmer.fromColors(
                baseColor: baseColor,
                highlightColor: highLightColor,
                child: ConstrainedBox(
                  constraints:
                      BoxConstraints.expand(width: shimmerWidth, height: 10.0),
                  child: DecoratedBox(
                      decoration: BoxDecoration(color: Colors.white)),
                ),
              ),
              const SizedBox(height: 5.0),
              Shimmer.fromColors(
                baseColor: baseColor,
                highlightColor: highLightColor,
                child: ConstrainedBox(
                  constraints:
                      BoxConstraints.expand(width: shimmerWidth, height: 10.0),
                  child: DecoratedBox(
                      decoration: BoxDecoration(color: Colors.white)),
                ),
              ),
              const SizedBox(height: 5.0),
              Shimmer.fromColors(
                baseColor: baseColor,
                highlightColor: highLightColor,
                child: ConstrainedBox(
                  constraints:
                      BoxConstraints.expand(width: shimmerWidth, height: 10.0),
                  child: DecoratedBox(
                      decoration: BoxDecoration(color: Colors.white)),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

このコードでは横長のレイアウトを BoxConstraints を使って表現しています。

 ConstrainedBox(
        constraints:
              BoxConstraints.expand(width: shimmerWidth, height: 10.0),
         child: DecoratedBox(
                        decoration: BoxDecoration(color: Colors.white)),
                   ),
)

所感

データの読み込み中はプログレスダイアログとかを出してユーザーがなにも操作できないようにするのが主流でしたが、 最近のトレンドとして、こういうレイアウトを出すアプリが多くなってきました。

UX向上にも繋がると思いますので、実装することをおすすめします。