Search code examples
flutterdart-2

How to add Border around an oval image? Flutter


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:

BoxShape.circle

and this is the result without any border shape at all

No Boxshape

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',
                  ),
                ),
              ),
            )