虎視眈々と

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

FlutterでFacebookや、YouTubeみたいなかっこいいプログレスを出す

f:id:superman199323:20181205234614j:plain

FlutterでFacebookや、YouTubeみたいなかっこいいプログレスを出す

この記事はFlutter #2 Advent Calendar 2018 6日目の記事になります。

どうなプログレスかというとこんなやつです。

かっこいい。これを実装します。

準備

今回導入するプラグインはこちら

pub.dartlang.org

いつも通りに pubspec.yml を編集します。

dependencies:
  shimmer: ^0.0.6

編集したら下記のコマンドを実行

flutter packages get

実装

このスクショの実装はこんな感じです。

まずはアイテム一個に表示するプログレスを用意します。

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)),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

これをListで表示してあげる

return ListView.builder(
              itemBuilder: (context, index) {
                return _progressGroupLayout();
              },
              itemCount: 5,
            );

うーん、かっこいい