Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – 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

Tags:

2

Answers


  1. 0

    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),
    ),
),
    Login or Signup to reply.
  2. 0 
    
  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),
    ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search