✅Custom Loading

The progress indicator that comes with Flutter, by default is okay in most places, but not in every place.

This is why we have created a custom loading effect that boosts user engagement even during the loading process. This kind of loading is common in popular apps like YouTube and LinkedIn.

Custom Loading Preview

How to show Skelton Loading

Please make sure you are using FlutterShop V1.1 or later. I have already created custom loading for almost all the components, you just need to uncomment them. For example on home/views/components/popular_products.dart uncomment ProductsSkelton() it shows the loading. For almost all components they are coomented, so whenever you need them, you can use them.

popular_products.dart

class PopularProducts extends StatelessWidget {
  const PopularProducts({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      ....
        // While loading use 👇
        // const ProductsSkelton(),
        
        SizedBox(
          height: 220,
          child: ListView.builder(
            ....
          ),
        )
      ],
    );
  }
}

On lib/components/skleton directory store all the skeltons.

Pro Tips: You can show/hide widgets using the Visibility Widget.

Make your own

Depending on your preferences, you can create your own loading. The following example shows how I create the product skeleton loading.

product_card_skelton.dart

class ProductCardSkelton extends StatelessWidget {
  const ProductCardSkelton({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 220,
      width: 140,
      child: Padding(
        padding: const EdgeInsets.all(defaultPadding / 2),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            AspectRatio(
              aspectRatio: 1.15,
              child: Skeleton(),
            ),
            Spacer(flex: 2),
            Skeleton(height: 12, width: 64),
            Spacer(flex: 2),
            Skeleton(),
            Spacer(),
            Skeleton(),
            Spacer(flex: 2),
            Skeleton(height: 12, width: 80),
            Spacer(),
          ],
        ),
      ),
    );
  }
}

Note: I'm not added any shimmer effect