How to add spacing between border and container widget

Question

Trying to have space between the border and the container . What I came up with is looking without space something like this

Code:

Container(
          width: 50,
          decoration: BoxDecoration(
          color: Color(0xFF229592),
          border: Border.all(width: 2, color: Colors.red),
          borderRadius: BorderRadius.circular(25)),
          );

Result expected:

Want the space between the border and container to be in place.

Answer 1

You can achieve this by creating a Container which has the color white and the border you desired and putting inside this Container another Container with the blue color.

Container(
  width: 50,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(width: 2, color: Colors.red),
    shape: BoxShape.circle,
  ),
  child: Center(
    child: FractionallySizedBox(
      heightFactor: 0.9, // Adjust those two for the white space
      widthFactor: 0.9,
      child: Container(
        decoration: BoxDecoration(
          color: Color(0xFF229592),
          shape: BoxShape.circle,
        ),
      ),
    ),
  ),
);

The result