CODEWITHSUNDEEP
imageflutterwidget
Edmand Looi
Edmand Looi

Reputation: 3561

Flutter CircleAvatar backgroundImage not filling up the circle

I am using a CircleAvatar with a backgroundImage property to load an image took from a camera but the image shown does not fill the entire circle avatar. It looks like a rectangular image in a circle.

How do I make the image expand to cover the circle avatar? Thanks.

Upvotes: 18

Views: 40010

Answers (4)

Jose Pedro Dava
Jose Pedro Dava

Reputation: 63

CircleAvatar(
        child: Image.network(
          items.logo,
          fit: BoxFit.fill,
        ),
        backgroundColor: Colors.transparent,
        radius: 30,
      )

Upvotes: 3

Ameer
Ameer

Reputation: 725

If you are using a local image from asset then you can use CircleAvatar as,

CircleAvatar(
          backgroundImage: ExactAssetImage('assets/images/cook.jpeg'),
          // Optional as per your use case
          // minRadius: 30,
          // maxRadius: 70,
        ),

If you are using a network image then you can use CircleAvatar as,

CircleAvatar(
     radius: 30.0,
     backgroundImage: NetworkImage(imageURL),
     backgroundColor: Colors.transparent,
     ));

Upvotes: 12

Payam Khaninejad
Payam Khaninejad

Reputation: 7996

This is my working example:

Stack(
                fit: StackFit.expand,
                children: <Widget>[
                  CircleAvatar(
                    radius: 30.0,
                    backgroundImage:
                        NetworkImage("https://via.placeholder.com/150/92c952"),
                    backgroundColor: Colors.transparent,
                  ),
                  Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: Image.asset(
                      'assets/photo-camera.png',
                      width: 20.9,
                      height: 19.9,
                    ),
                  ),
                ],
              ))

Upvotes: 2

Ian
Ian

Reputation: 2984

You can always create an image and manually clip it:

ClipOval(
  child: Image.network(
    "url.jpg",
    fit: BoxFit.cover,
    width: 90.0,
    height: 90.0,
  )
),

Upvotes: 42

Related Questions