search

Milad-Akarie / skeletonizer

MIT License
358 stars 22 forks source link

Add Support for Skeleton Effect on SVG Icons #43

Open wm-jenildgohel opened 1 month ago

wm-jenildgohel commented 1 month ago

I frequently use this package in my projects and have encountered an issue when applying a shimmer effect to SVG icons. Currently, there is no direct support for rendering SVG with shimmer, causing difficulties in achieving the desired visual effect.

Please consider adding native support for applying shimmer effects to SVG icons or guide how to implement this feature.

Thank you!

mattalbr commented 1 month ago

Adding on here from a different project, when I use Skeletonizer on a mobile device, it properly handles my VectorGraphic(AssetBytesLoader("...svg")) image

But the exact same code run on web does not properly skeltonize the svg image

muhammadkamel commented 1 month ago

@Milad-Akarie I am also encouraging the same issue with SVG assets

Milad-Akarie commented 1 month ago

Custom painted widgets must be wrapped with Skeleton.shade

mattalbr commented 1 month ago

@Milad-Akarie Thanks for the response! Is there no way from within skeletonizer to understand that VectorGraphic needs shading?

wm-jenildgohel commented 1 month ago

@Milad-Akarie Thank you for your assistance; everything is now functioning properly. I suppose you have to incorporate this straight into future versions or mention it somewhere in the documentation. I had this problem in several apps, and it has already been addressed.

dattd38 commented 4 weeks ago

I frequently use this package in my projects and have encountered an issue when applying a shimmer effect to SVG icons. Currently, there is no direct support for rendering SVG with shimmer, causing difficulties in achieving the desired visual effect.

Please consider adding native support for applying shimmer effects to SVG icons or guide how to implement this feature.

Thank you! Solution: use Skeleton.replace

return Skeleton.replace( replacement: _placeholder, replace: true, child: SvgPicture.asset( widget.image ?? '', width: widget.width ?? widget.size, height: widget.height ?? widget.size, fit: widget.fit, colorFilter: widget.color != null ? ColorFilter.mode(widget.color!, BlendMode.srcIn) : null, placeholderBuilder: (context) => _placeholder, ), );