flutter how to make skeleton loader

Question

I have this card product card, get it from api with FutureBuilder, when my card is loading i want to show skeleton loader not just CircularProgressIndicator , how can i make it.

My futureBuilder:

FutureBuilder<List<Product>>(
               future: productFuture,
               builder: (context, snapshot) {
                 if (snapshot.connectionState == ConnectionState.waiting) {
                   return Center(child: CircularProgressIndicator());
                 } else if (snapshot.hasData) {
                   final catalog = snapshot.data;
                   return buildCatalog(catalog!);
                 } else {
                   return Text("No widget to build");
                 }
               }),

here is example of skeleton loader

Answer 1

You can try this package : shimmer

   Shimmer.fromColors(
      baseColor: Colors.red,
      highlightColor: Colors.yellow,
      child: Container(
        height: 20,
        width: 100,
        color: Colors.white,
      ),
    );