How to add loading effect or shimmer effect to the image in circle avatar?

Question

The following is my code for getting image from camera or gallery and updating the user image if any from server and showing default asset image if there is no user image exist. Can anyone say how can I add loading or shimmer effect when the image from the server is loading?

                      child: CircleAvatar(
                      backgroundImage: (_image != null)
                          ? FileImage(_image)
                          : (_userImage != null && _userImage != "")
                              ? NetworkImage(_userImage)
                              : AssetImage(
                                  DrawableResource.imagePlaceHolder),
                      radius: 75,
                      backgroundColor: Colors.grey,
                    ),

Answer 1

You can try below code or you can use cachedNetworkImage with errorWidget Property from package: cached_network_image: ^3.2.1

package for below code: shimmer: ^2.0.0

child: CircleAvatar(
                      backgroundImage: (_image != null)
                          ? FileImage(_image)
                          : (_userImage != null && _userImage != "")
                              ? CachedNetworkImage(
                            imageUrl: _userImage,
                            fit: BoxFit.cover,
                            errorWidget: (context, value, value1) {
                              return Container(
                                child: Center(
                                  child: 
                    Text("No image found"),
                                ),
                              );
                            },
                          ),
                              : AssetImage(
                                  DrawableResource.imagePlaceHolder),
                      radius: 75,
                      backgroundColor: Colors.grey,
                    ),