FadeInImage in CircleAvatar

Question

How can I have a fade in effect in CircleAvatar? Type of backgroundImage of CircleAvatar is ImageProvider and FadeInImage is not a ImageProvider

Answer 1

Use Clip react, for image loading i use CachedNetworkImage(cached_network_image: 2.3.3)

       ClipRRect(
                borderRadius: BorderRadius.circular(25.0),
                child: CachedNetworkImage(
                    fit: BoxFit.cover,
                    width: 50,
                    height: 50,
                    placeholder: (context, url) => Image.asset('loadder.gif'),
                    imageUrl:
                        "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRLe5PABjXc17cjIMOibECLM7ppDwMmiDg6Dw&usqp=CAU"),
              ),

this is user loader image or gif(example).

placeholder: (context, url) => Image.asset('loadder.gif'),

this is your main image(example).

imageUrl:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRLe5PABjXc17cjIMOibECLM7ppDwMmiDg6Dw&usqp=CAU"),