flutterdart

Container border color doesn't bend in with the background color

Okay so I have this small container on top of another container. All of this is in a Stack widget. Even thought both container has same color value of White. The upper small container border has faint black border as you can see in the picture if you focus enough. Like it's not perfectly bending in. Is there any way to fix this?

The smaller container code

Container(

  padding: const EdgeInsets.all(4),
    decoration: BoxDecoration(
      color: const Color.fromARGB(255, 67, 83, 114),
        border: Border.all(color: Colors.white, width: 2),
        borderRadius: BorderRadius.circular(13)
    ),
    child: Text(
      duration,
      style: const TextStyle(color: Colors.white, fontSize: 13),
    ),
),

The background Container code:

Container(
  padding: const EdgeInsets.all(5),
    width: 195,
    height: 180,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(25),
      color: Colors.white,
      boxShadow: const [
        BoxShadow(
          color: Color.fromARGB(255, 194, 221, 245),
          offset: Offset(0, 6),
          blurRadius: 5,
        )
      ]),
    child: Column(
      children: [
        ClipRRect(
          // image
          borderRadius: BorderRadius.circular(20),
          child: Image.asset(
            imagePath,
            width: 185,
            height: 120,
            fit: BoxFit.cover,
          ),
        ),
      ],
    ),
),

enter image description here

Close up picture

enter image description here

Solution

  • Add strokeAlign:0 to smaller container. You can check out below code.

    Container(

  padding: const EdgeInsets.all(4),
    decoration: BoxDecoration(
      color: const Color.fromARGB(255, 67, 83, 114),
        border: Border.all(color: Colors.white, width: 2, strokeAlign: 0),
        borderRadius: BorderRadius.circular(13)
    ),
    child: Text(
      duration,
      style: const TextStyle(color: Colors.white, fontSize: 13),
    ),
),