Different types of shimmers to show before loading a content on your flutter app

Shimmers.dart

import 'package:flutter/material.dart';
import 'dart:async';
 
enum Type {services,servicesPreview,marketPreview,cards,comments,image,images,complex}

class Shimmer extends StatefulWidget {
  final Type type;
  const Shimmer({Key key, @required this.type}) : super(key: key);
  @override
  ShimmerState createState() => ShimmerState();
}

class ShimmerState extends State<Shimmer> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Color> _colr;
  final Common common = Common();
  

  @override
  void initState() {
    start();
    _startAnimation();
    super.initState();
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget child) {
        switch (widget.type) {
          case Type.servicesPreview: return shimmerGrid(true);
          break;          
          case Type.services: return shimmerGrid(false);
          break;
          case Type.cards: return  shimmerList(card());
          break;
          case Type.comments: return  shimmerList(comment());
          break;
          case Type.image: return image();
          break;
          case Type.images: return shimmerList(image());
          break;
          case Type.complex: return complex();
          break;
          case Type.marketPreview: return marketPreview();
          break;
          default:
          return CircularProgressIndicator();
        }
      },
    );
  }


Widget shimmerGrid(bool preview) {
    return GridView.builder(
      padding: EdgeInsets.all(2),
      shrinkWrap: true,
      physics: BouncingScrollPhysics(),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: preview?4:3,
          childAspectRatio:preview? 0.85:0.95,
          crossAxisSpacing: 4,
          mainAxisSpacing: 4),
      itemCount:preview?8:50,
      itemBuilder: (c, int i) {
        return service();
      },
    );
  }

  Widget service() {
     return Container(
      height: 80,
      width: 80,
      decoration: BoxDecoration(
          border: Border.all(
            color: Colors.white,
            width: 1.75,
          ),
          color: _colr.value,
          shape: BoxShape.circle),
    );
  }


  Widget marketPreview(){
    return GridView.builder(
      addAutomaticKeepAlives: true,
      shrinkWrap: true,
      physics: ClampingScrollPhysics(),
      padding: EdgeInsets.all(4),
      itemCount:10,
      itemBuilder: (context, int i) {
         return Material(
            clipBehavior: Clip.antiAlias,
            elevation: 2.5,
            borderRadius: BorderRadius.circular(10.0),
            child: InkWell(
              splashColor: Colors.white10,
              highlightColor: Colors.white10,
              child: Container(
                alignment: Alignment.bottomCenter,
                 decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5),
                gradient: new LinearGradient(
                colors: [
                  Colors.transparent,
                  Colors.grey,
                ],
                begin: const FractionalOffset(0.0, 0.0),
                end: const FractionalOffset(0.0, 1.70),
                stops: [0.5,0.675]
                ),
              ),
              child: image(),
              ),
              onTap: (){
               
              },
            ),
          );
      },
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 8,
        mainAxisSpacing: 12,
      ),
    );
  }

Widget shimmerList(Widget shimmer){
 return ListView.builder(
   shrinkWrap: true,
   physics: BouncingScrollPhysics(),
   itemCount: 10,
   itemBuilder: (c,int i){
     return shimmer;       
    },
  );
}

Widget complex(){
 return ListView.builder(
   shrinkWrap: true,
   physics: BouncingScrollPhysics(),
   itemCount: 10,
   itemBuilder: (c,int i){
     return i==0? card():comment();     
    },
  );
}



  Widget comment() {
    return Card(
     elevation: 0,
     child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: CircleAvatar(
                      backgroundColor: _colr.value,
                    ),
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                        height: 15,
                        width: 150,
                        alignment: Alignment.centerLeft,
                        decoration: BoxDecoration(
                            color: _colr.value,
                            borderRadius: BorderRadius.circular(10)),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top: 8.0),
                        child: Container(
                          height: 12,
                          width: 100,
                          alignment: Alignment.centerLeft,
                          decoration: BoxDecoration(
                              color: _colr.value,
                              borderRadius: BorderRadius.circular(10)),
                        ),
                      ),
                    ],
                  )
                ],
              ),
            ),
    );
  }

  Widget card() {
    return Card(
      elevation: 0,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: CircleAvatar(
                    backgroundColor: _colr.value,
                  ),
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      height: 15,
                      width: 150,
                      alignment: Alignment.centerLeft,
                      decoration: BoxDecoration(
                          color: _colr.value,
                          borderRadius: BorderRadius.circular(10)),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 8.0),
                      child: Container(
                        height: 12,
                        width: 100,
                        alignment: Alignment.centerLeft,
                        decoration: BoxDecoration(
                            color: _colr.value,
                            borderRadius: BorderRadius.circular(10)),
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              height: 200,
              decoration: BoxDecoration(
                  color: _colr.value, borderRadius: BorderRadius.circular(5)),
            ),
          )
        ],
      ),
    );
  }

  Widget image(){
    return Container(
      color: Colors.white,
      child: Center(
        child: CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation(_colr.value),
        ),
      ),
    );
  }

  void start() {
    _controller = AnimationController(
      duration: Duration(milliseconds: 300),
      vsync: this,
    );
    _colr = ColorTween(begin: Colors.grey.shade100, end: Colors.grey.shade300)
        .animate(CurvedAnimation(
            parent: _controller,
            curve: Interval(0.1, 1, curve: Curves.easeIn)));
  }

  Future _startAnimation() async {
    try {
    await _controller.forward().orCancel;
    await _controller.reverse().orCancel;
      _startAnimation();
    } on TickerCanceled {}
  }
}