Search code examples
flutterdartsvgcardshimmer

How to show shimmer effect on cards which is placeholder of SVG network images in flutter


I haven't seen which describes the answer for my question in stackoverflow.

Here is some workaround

  1. Add shimmer: ^latestversion to your pubspec.yml file.
  2. Import the package import 'package:shimmer/shimmer.dart'; in your dart file.

Solution

  • SvgPicture.network( width: 130.w,
    'https://fromnetwork.svg',
     placeholderBuilder: (BuildContext context) =>
       Container(
        child: Shimmer.fromColors(
               baseColor:Colors.grey[300]!,
               highlightColor:Colors.grey[100]!,
               child:
                    shimmerCard())),
              ),
    
    Widget shimmerCard() {
        return Container(
          color: Colors.white,
        );
      }
    

    this will give shimmer loading on cards till the svg images downloads from network