close

How to Set Network Image In Circular Avatar In Flutter?

Hello guys how are you all? Hope you all are fine. In Today’s tutorial, we are going to learn How to set Network Image In Circular Avatar In Flutter?

when we are trying to get Images from API and we have to use an image from api into round corner or circleavatar in a flutter.

Here we have define Different method for Circular Avatar.

How to Set Network Image In Circular Avatar In Flutter?

Example 1 CircleAvatar With Network Image

  • To use CircleAvatar we need to define our Network OR Asset Image in backgroundImage property.
  • also, give radius that will our image radius.
  • For example like below. [ Image source unsplash.com ].
        CircleAvatar(
            radius: 120.0,
            backgroundImage: NetworkImage(
                "https://images.unsplash.com/photo-1597466765990-64ad1c35dafc"),
          ),
  • Our Output will be like below.
circular avatar in flutter,
image in circular avatar flutter,
network image in circular flutter,
set network image in circular flutter,
Set Network Image In Circular Avatar In Flutter

Example 2 CircleAvatar with border in Flutter

  • Here is we are going to give Border to our CircleAvtar image.
  • Here’s the code to create a Circular avatar with a border,
          child: CircleAvatar(
            radius: 130,
            backgroundColor: Colors.red,
            child: CircleAvatar(
              radius: 120,
              backgroundImage: NetworkImage(
                  'https://images.unsplash.com/photo-1597466765990-64ad1c35dafc'),
            ),
          ),
        ),
circular avatar in flutter,
image in circular avatar flutter,
network image in circular flutter,
set network image in circular flutter,
Set Network Image In Circular Avatar In Flutter

Example 3 with ClipOval

  • Try this Code with clipoval.
          child: CircleAvatar(
            radius: 120,
            child: ClipOval(
              child: Image.network(
                'https://images.unsplash.com/photo-1597466765990-64ad1c35dafc',
              ),
            ),
          )
  • Output will be like below.
circular avatar in flutter,
image in circular avatar flutter,
network image in circular flutter,
set network image in circular flutter,
Set Network Image In Circular Avatar In Flutter

Example 4 with ClipOval

          child: ClipOval(
            child: Image.network(
              'https://images.unsplash.com/photo-1597466765990-64ad1c35dafc',
              width: 200,
              height: 200,
              fit: BoxFit.cover,
            ),
          ),
  • Output will be like below.
circular avatar in flutter,
image in circular avatar flutter,
network image in circular flutter,
set network image in circular flutter,
Set Network Image In Circular Avatar In Flutter
  1. How to set Network image in circle avatar in flutter ?

    to set Network image in circle avatar in flutter use CircleAvatar we need to define our Network OR Asset Image in backgroundImage property. also, give radius that will our image radius. For example like below.

  2. set Network image in circle avatar in flutter

    to set Network image in circle avatar in flutter use CircleAvatar we need to define our Network OR Asset Image in backgroundImage property. also, give radius that will our image radius. For example like below.

Summery

So Guys That’s It For this tutorial. Hope you like our tutorial. Comment below Your thoughts and your queries. And Also Comment on your suggestion here.

Also Check Out Below Tutorials

Leave a Comment

%d bloggers like this: