fluttter shimmering effect is working but after shimmering effect image is not showing

Question

fluttter shimmering effect is working but after shimmering effect image is not showing This is my code

Shimmer.fromColors(
baseColor: Colors.grey.shade300,
highlightColor: Colors.grey.shade100,
enabled: true,
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
bottomRight: Radius.circular(30),
),
),
child: Image.asset(
'assets/hinas3.png',
fit: BoxFit.cover,
),
),
),

I tried to add shimmering effect on an assets image

Answer 1

the enabled property should be supplied a variable that changes once your content loads. Since you have set it to hardcoded true it will keep shimmering....

You will have to manually load the image if you want to have control over its loading cycle. Try this :

setState(()=>_loading=true); // supply _loading to enabled property
var imageData = await rootBundle.load('path/to/assets/images/fileName.jpg');
setState(()=>_loading=false);

Answer 2

Try this awesome package to easily achieve shimmer. https://pub.dev/packages/skeletonizer

Answer 3

bool _loading = true;

// ...

setState(() => _loading = true); // Set loading state to true before loading the image
var imageData = await rootBundle.load('path/to/assets/images/fileName.jpg');
setState(() => _loading = false); // Set loading state to false after loading the image

// ...

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(30),
      bottomRight: Radius.circular(30),
    ),
  ),
  child: ClipRRect(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(30),
      bottomRight: Radius.circular(30),
    ),
    child: _loading
        ? Shimmer.fromColors(
            baseColor: Colors.grey.shade300,
            highlightColor: Colors.grey.shade100,
            enabled: true,
            child: Container(
              color: Colors.white,
            ),
          )
        : Image.asset(
            'path',
            fit: BoxFit.cover,
          ),
  ),
),

You need to give conditionally ...

In this example, the Shimmer effect will be enabled only when _loading is set to true. When the content has finished loading, _loading is set to false, and the actual image will be displayed without the shimmer effect.

This approach provides more control over the loading cycle and ensures that the shimmer effect is only applied when needed.