shimmer effect while loading images from firebase

Question

I have a flutter app that display some data stored in Firebase realtime database. I am using getx for state management. the text data loads fast but the images take more time. I want to display a shimmer effect on the images only while they are loading.

How cam I achieve that?

I have tried this code with CachedNetworkImage but the shimmer does not disappear.

class TestListItem extends StatelessWidget {
  const TestListItem({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ListTile(
            leading: Shimmer.fromColors(
              baseColor: Colors.grey.shade300,
              highlightColor: Colors.grey.shade100,
              child: CachedNetworkImage(
                imageUrl: 'https://imglarger.com/Images/before-after/ai-image-enlarger-1-after-2.jpg',
                placeholder: (context, url) => const CircleAvatar(
                  backgroundColor: AppTheme.circleBgColor,
                  radius: 50,
                ),
                imageBuilder: (context, imageProvider) => CircleAvatar(
                  backgroundColor: AppTheme.circleBgColor,
                  backgroundImage: imageProvider,
                  radius: 50,
                ),
                errorWidget: (context, url, error) => const CircleAvatar(
                  backgroundColor: AppTheme.circleBgColor,
                  radius: 50,
                  child: Icon(Icons.error),
                ),
              ),
            ),
            title: Text('test title'),
            subtitle: Text('test subtitle'),
          ),
        ],
      ),
    );
  }
}

Answer 1

add shimmer: ^3.0.0 in pubspec.yaml

then add

SizedBox(
                width: width,
                height: height * 0.1,
                child: Shimmer.fromColors(
                  baseColor: Colors.grey[300]!,
                  highlightColor: Colors.grey[100]!,
                  child: Container(
                    height: 100,
                    width: 100,
                  )
                ),
              );

use this code while your image is loading, and remember to import

import 'package:shimmer/shimmer.dart';