`CircularAvatar` does not get detected

[dxvid-pts]

Documentation:

https://api.flutter.dev/flutter/material/CircleAvatar-class.html

Description:

I'm using a CircleAvatar in my application to display an image. I intend for the avatar to show a shimmer effect until the user's image is loaded. However, the CircleAvatar widget isn't being recognized, so the expected effect doesn't appear. Here's the code I'm using:

CircleAvatar(
  backgroundImage: NetworkImage(userAvatarUrl),
),

Proposal:

Let's treat the CircleAvatar in the same way as the Icon widget and display a circle shimmer when the content is loading.

[Milad-Akarie]

@dxvid-pts hmmm you should try to replace this widget while skeletonizer is enabled because the network image properly has no size at the point so it's layout is unknown to skeltonizer

[edsonbonfim]

Same here, but I am using an icon instead of a network image. In this case, only the icon have shimmer effect, but not the circle avatar.

CircleAvatar(
  backgroundColor: Color(0xffFFF0F6),
  foregroundColor: Color(0xffF06595),
  child: Icon(Icons.home),
)

I solve using Skeleton.replace, but is inconvenient, the ideal was lib make this automatically. Thanks.

Skeleton.replace(
  replacement: ClipRRect(
    borderRadius: BorderRadius.circular(40),
    child: SizedBox(
      width: 40,
      height: 40,
      child: ColoredBox(color: Colors.black),
    ),
  ),
  child: const CircleAvatar(
    backgroundColor: Color(0xffFFF0F6),
    foregroundColor: Color(0xffF06595),
    child: Icon(Icons.home),
  ),
)

[Milad-Akarie]

@edsonbonfim This happens because Skeletonizer doesn't want to treat your containers as leafs or bones, a CircleAvatar is like a Container widget with a circle shape, we wouldn't get a nice result if we auto-shimmer every container, I'm thinking maybe I can add a size factor, auto-skeletonizer any container sized less then factor.... any ways you can both fix your issues by using the Skeleton.leafannotation which tells skeletonizer the treat the any child widget (container or any ) as a leaf widget that has no children even if it does

Skeleton.leaf(
  child: CircleAvatar(
    backgroundColor: Color(0xffFFF0F6),
    foregroundColor: Color(0xffF06595),
    child: Icon(Icons.home),
  ),
)

[Trung15010802]

any ways you can both fix your issues by using the Skeleton.leafannotation which tells skeletonizer the treat the any child widget (container or any ) as a leaf widget that has no children even if it does

Hi, i create a shimmer skeleton like this but it doesn't work. Could you help me please?

Skeleton.leaf(
              enabled: true,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: const SizedBox(
                  height: latestGridviewSize / 3,
                  width: latestGridviewSize / 3,
                  child: Placeholder(),
                ),
              ),
            )

[azeunkn0wn]

This works for me.

Skeleton.shade(
  child: CircleAvatar(
    maxRadius: 25,
    backgroundColor: Colors.transparent,
    child: CachedNetworkImage(
            ...
    ),
  ),
),