how do I make circular avatar image is loading in flutter?

Question

This is my code how can I show circular progress indicator inside the Circle avatar until get from backend in flutter.

`class _SideBarState extends State<SideBar> {
          bool _isShown = true;
          late SharedPreferences prefs;
          late String name = "";
          late String profile_pic = "";
        
        
          @override
          void initState() {
            _initController();
            super.initState();
        
          }
          void _initController()async {
            prefs = await SharedPreferences.getInstance();
            Map b = json.decode(prefs.getString("token")!);
            name = b['data']['name'];
            profile_pic = b['data']['profile_image_url'];
            setState(() {
        
            });
          }`  Widget build(BuildContext context) {
            return Drawer(
              child: ListView(
                padding: EdgeInsets.zero,
                children: [
                  Container(
                    height: 360.0,
                    child: DrawerHeader(
                      decoration: const BoxDecoration(color: Colors.white),
                      child: Column(
                        children:  [
                          const Image(
                            image: AssetImage("assets/title.png"),
                          ),
                          const SizedBox(
                            height: 25.0,
                          ),
                           CircleAvatar(
                            radius: 80.0,
                            backgroundImage: NetworkImage(
                                profile_pic,
                            ),
                          ),
                          const SizedBox(
                            height: 10.0,
                          ),
                          Center(
                            child: Text(
                              "Hi, $name",
                              style: const TextStyle(color: Colors.grey),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),`

please help me to solve this problem.

or give some other ways to do the loader.

This is my code how can I show circular progress indicator inside the Circle avatar until get from backend in flutter.

Answer 1

make a bool variable initialized with false and change its value once the method that gets the profile_pic is complete. Check on that variable and whether show a circular indicator or the avatar with the image.

Answer 2

You can use cachedNetworkImage Package, placeholder will be displayed till the image is being loaded.

CachedNetworkImage(
        imageUrl: "",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),

https://pub.dev/packages/cached_network_image