CODEWITHSUNDEEP
flutterdart
Amani
Amani

Reputation: 18123

How can I control image size in Flutter's CircleAvatar?

I have this Dart code in a Flutter project;

CircleAvatar(
  radius: 130.0,
  backgroundImage: AssetImage('assets/image.jpg'),
  backgroundColor: Colors.transparent,
)

The radius parameter seem to control the size of part of the image seen through the circle 'window', this obscures part of the image because the image size is still the same. The image is 567 * 572 pixel. How can I control the size of the image as well?

Upvotes: 6

Views: 5388

Answers (4)

Mohammad Bilal Akbar
Mohammad Bilal Akbar

Reputation: 170

To control image size (height and width) in Flutter's CircleAvatar, do this:

                      CircleAvatar(
                        radius: 20,
                        backgroundColor: Color(0XFFEEEEFF),
                        child: CircleAvatar(
                          radius: 15,
                          backgroundImage: AssetImage(
                            ImageAssets.micIcon,
                          ),
                          backgroundColor: Color(0XFFEEEEFF),
                        ),
                      ),

OR this code must work:


                      CircleAvatar(
                        radius: 20,
                        backgroundColor: Color(0XFFEEEEFF),
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(50),
                            color: Color(0XFFEEEEFF),
                          ),
                          child: Image.asset(
                            ImageAssets.micIcon,
                            height: height * 0.03,
                            width: width * 0.2,
                          ),
                        ),
                      ),

enter image description here

Upvotes: 0

Night Coder
Night Coder

Reputation: 153

SizedBox(
  width: 100,
  height: 100,
  child: CircleAvatar(
    child: ClipOval(
      child: Image.network(photo),
    ),
  ),
),

Upvotes: -1

littleironical
littleironical

Reputation: 1914

Instead of using CircleAvatar, use Container and make it circular, like this:

Container(
  width: 130,
  height: 130,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image:  AssetImage('assets/image.jpg'),
      fit: BoxFit.fill
    ),
  ),
)

The output (ignore the blur in the background):

enter image description here

Upvotes: 3

Guilherme Dias
Guilherme Dias

Reputation: 148

Try this:

Image.asset(
  'assets/images.jpg',
   width: 300,
   height: 150,
   fit:BoxFit.fill  
),

Upvotes: -2

Related Questions