对于颤振中的圆形属性，形状无法正常工作

Question

I'm trying to make a circular image box, but after using shape: Boxshape.circle , it is working properly on my current image. I'm sure that the shape property doesn't depend on the image pixel or any sort of thing.

I have this code:

return Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Container(
        margin: EdgeInsets.only(right: 40.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              height: 144.0,
              width: 144.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                  fit: BoxFit.fill,
                  image: AssetImage('MY_IMAGE')
                )
              )
            )
          ]
        )
      )
    ],
);

I have read about the Boxdecoration from this link: Flutter - BoxDecoration . I'm confident that the shape should work but in my case, it is not working.

This is the result which I'm getting right now:

Answer 1

Use a ClipRRect inside a SizedBox :

  Container(
    child: new SizedBox(
                height: 144.0,
                width: 144.0,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(72.0),
                  child: new Image.asset('MY_IMAGE'),
                 ),
               ),
             ),

Answer 2

Try this code

Container(
          color: Colors.amber,// this is just for detection, rounded or not
          child: Center(
            child: new Container(
                height: 144.0,
                width: 144.0,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(72),
                    image: DecorationImage(
                        fit: BoxFit.fill,
                        image: AssetImage('assets/img1.png')))),
          ),
        )

Answer 3

Use the same code that you have posted in the question. But, instead of BoxFit.contain or BoxFit.fill , try using BoxFit.cover .

As it is mentioned in the comment by Mazin Ibrahim in the above answer, the actual height of your image must be less than the radius of the circular container, so even though the container is circular in shape you are not able to see it.

Check this link for more details.

Answer 4

For me it works using ClipOval in the child, and increasing a bit the image size with Transform.scale

                 Container(
                    decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(40))),
                    child: ClipOval(
                      child: Transform.scale(
                        scale: 1.6,
                        child: Image.asset(
                          "my asset image",
                          width: 80,
                          height: 80,
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  )

Answer 5

For my case it worked like that -

 Container(
          height: (20.0),
          width: (20.0),
          decoration: const BoxDecoration(
            shape: BoxShape.circle,
          ),
          child: ClipOval(
            child: SvgPicture.asset(
              'assets/icons/$icon.svg',
              fit: BoxFit.cover,
              color: color,
            ),
          ),
    )