Give a cool progress like Facebook, YouTube with Flutter

What kind of progress is this kind of guy.

Preparation

Click here for plugin to be installed

shimmer | Flutter Package

I pubspec.ymlwill edit it as usual .

dependencies:
  shimmer: ^0.0.6

After editing, execute the following command

flutter packages get

Implementation

Implementation of this squish is like this.

First, prepare a progress display on one item.

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

I will display this in List

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

Well, cool