Flutter: Container color overflowing border

Question

I need to make a container with rounded borders, color, and an outline, but the background color is overflowing the outline color.

How can I fix this?

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 21,
        constraints: BoxConstraints(
          minWidth: 21,
        ),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.white, width: 2),
          borderRadius: BorderRadius.circular(21),
          color: Colors.pink,
        ),
        child: Align(
            child: Text(
          "1",
          style: TextStyle(
              color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12),
        )));
  }
}

Result: (most visible on the left side)

Answer 1

It... looks like a bug? I think you can report the issue to flutter github.

If you just want a workaround solution, you can try to move the background color (pink) to the lower level of your widget.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 21,
      constraints: BoxConstraints(
        minWidth: 21,
      ),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.white, width: 2),
        borderRadius: BorderRadius.circular(21),
      ),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(21),
          color: Colors.pink,
        ),
        child: Align(
          child: Text(
            "1",
            style: TextStyle(
              color: Colors.white, fontWeight: FontWeight.bold, fontSize: 12,
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

There is an open issue in Github regarding this issue.

Here I attached the workaround I found working from @artyomdevyatov's reply.

return Container(
  width: 28,
  height: 28,
  decoration: BoxDecoration(
    color: Colors.grey, // border color
    shape: BoxShape.circle,
  ),
  child: Padding(
    padding: EdgeInsets.all(2), // border width
    child: Container( // or ClipRRect if you need to clip the content
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.orange, // inner circle color
      ),
      child: Container(), // inner content
    ),
  ),
);