How to add Border around an oval image? Flutter

Issue

I want to add a border color around an oval shaped image that doesn’t have a constant height value.

My code example:

                        Align(
                          child: ConstrainedBox(
                            constraints: const BoxConstraints(
                              maxHeight: 220.0,
                            ),
                            child: Container(
                              height: null,
                              width: 150.0,
                              decoration: BoxDecoration(
                                shape: BoxShape.circle,
                                border: Border.all(
                                  color: Colors.blueAccent,
                                  width: 2.0,
                                ),
                              ),
                              child: ClipOval(
                                child: Image.network(
                                  'https://images.unsplash.com/photo-1606122017369-d782bbb78f32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cG9ydHJhaXRzfGVufDB8fDB8fA%3D%3D&w=1000&q=80',
                                ),
                              ),
                            ),
                          ),
                        ),

This is the result of having a border shape: BoxShape.circle:

and this is the result without any border shape at all

However I want the border to be properly and evenly around the corners of the image.

The only attribute left is boxshape.value but I cant find examples on how to use it. Also the container has a null value, making it harder to insert specific value

Solution

Try this:

ClipOval(
          child: Container(
            height: 150.0,
            width: 150.0,
            color: Colors.blueAccent,
            padding: const EdgeInsets.all(2),
            child: ClipOval(
              child: Image.network(
                fit:BoxFit.cover,
                'https://images.unsplash.com/photo-1606122017369-d782bbb78f32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cG9ydHJhaXRzfGVufDB8fDB8fA%3D%3D&w=1000&q=80',
              ),
            ),
          ),
        )

Answered By – manhtuan21

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)