How to Set Network Image In Circular Avatar In Flutter?

How to Set Network Image In Circular Avatar In Flutter?

When the user gets a list of images from API and the user wants to display them in a Circular Avatar So in this article, we will be discussing How to Set Network Image In Circular Avatar In Flutter?

How to Set Network Image In Circular Avatar In Flutter?

Users need to backgroundImage: property in order to fit it in Circle. Code Snippet will look like below:

CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    NetworkImage("${snapshot.data.hitsList[index].previewUrl}"),
                backgroundColor: Colors.transparent,
              )

To Check with Dummy Placeholder:

CircleAvatar(
                radius: 30.0,
                backgroundImage:
                    NetworkImage('https://via.placeholder.com/150'),
                backgroundColor: Colors.transparent,
              )

Users can also give try to below code snippet.

CircleAvatar(
    radius: 18,
    child: ClipOval(
        child: Image.network(
          'image-url',
        ),
    ),
),

User can also try the below code snippet:

CircleAvatar(
       radius: 26,
       backgroundColor: Colors.white,
       child: ClipOval(
         child: _bytesImage == null
             ? new Text('No image value.')
             : Image.memory(
                 _bytesImage,
                 width: 60,
                 height: 60,
                 fit: BoxFit.cover,
               ),
       ),
     ),

Conclusion:

In this article, We have learned about How to Set Network Image In Circular Avatar In Flutter?

Keep Learning !!! Keep Fluttering.

Do let us know your valuable suggestion to serve you better.

You can also read our article on Image from Here.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.