Container border is not cliping in flutter

Question

I want to make a UI which has a outer container which has border. Inside the container I have a column which contains a image and a container text inside. I want the inner container which has text to on top of border of outer container so that border is not visible where inner container is present here is my code. I want this output I get this result I dont want border to be shown on bottom

    Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: const Color(0xFFEDEDED),
    ),
    borderRadius: BorderRadius.circular(8),
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        offset: const Offset(0, 4),
        blurRadius: 8,
        color: const Color(0xff000000).withOpacity(0.25),
      )
    ],
  ),
  child: Column(
    children: [
      // * IMAGE
      Padding(
        padding: const EdgeInsets.symmetric(vertical: 16),
        child: Image.asset(
          image,
          width: 96,
          height: 96,
        ),
      ),
      // * ---------------
      // * INNER CONTAINER
      // * ---------------
      Container(
        height: 40,
        clipBehavior: Clip.antiAlias,
        padding: const EdgeInsets.symmetric(horizontal: 4),
        width: double.infinity,
        decoration: BoxDecoration(
          color: backgroundColor,
          border: Border.all(color: backgroundColor),
          borderRadius: const BorderRadius.only(
            bottomLeft: Radius.circular(8),
            bottomRight: Radius.circular(8),
          ),
        ),
        child: Center(
          child: Text(
            title,
            textAlign: TextAlign.center,
            style: const TextStyle(
                fontSize: 13,
                fontWeight: FontWeight.w500,
                color: Colors.white),
          ),
        ),
      )
    ],
  ),
);

Add `mainAxisSize: MainAxisSize.min` in Column widget so the it'll take minimum size (just much it's child occupies). And about border not visible, i guess the border you added is white colored change it, and you can try increasing the border width. — pixel, Jul 05 '23 at 09:57

score 0 · Answer 1 · answered Jul 05 '23 at 10:50

Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.red),
          borderRadius: BorderRadius.circular(20.0)
        ),
        clipBehavior: Clip.antiAlias,
        width: 150,
        height: 150,
        child: Column(
          children: [
            const Expanded(
              child: Center(
                child: Icon(Icons.calendar_month_outlined, size: 50, color: Colors.red,),
              ),
            ),
            Container(
              color: Colors.red,
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8.0),
              child: Text('Employee Management', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, height: 1),),
            )
          ],
        ),
      )

Border has clipped from corners but it is still showing on bottom and left, right side of inner container — Hasnain Bhatti, Jul 05 '23 at 11:33

pixel · Answer 2 · 2023-07-05T11:38:22.467

Here, you can refer to the below code for your design:

Widget _customCard(IconData icon, String title, Color color) {
return Container(
  margin: const EdgeInsets.all(8),
  decoration: BoxDecoration(
    border: Border.all(color: color, width: 1),
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        offset: const Offset(0, 4),
        blurRadius: 8,
        color: const Color(0xff000000).withOpacity(0.25),
      )
    ],
  ),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Expanded(
        child:
        /// replace this Icon widget with your existing Image widget.
          Icon(
          icon,
          size: 100,
        ),
      ),
      Container(
        height: 40,
        decoration: BoxDecoration(
          color: color,
          borderRadius: const BorderRadius.only(
            bottomLeft: Radius.circular(8),
            bottomRight: Radius.circular(8),
          ),
        ),
        child: Center(
          child: Text(
            title,
            textAlign: TextAlign.center,
            style: const TextStyle(
                fontSize: 13,
                fontWeight: FontWeight.w500,
                color: Colors.white),
          ),
        ),
      )
    ],
  ),
);
}

And it will look like this:

Don't forget to replace the Icon widget with the your existing image widget and set size as per your need

You have removed the border I need to show border but border should be clipped where inner container is that contains title , rest of the area border should be displayed — Hasnain Bhatti, Jul 05 '23 at 11:26
Border color is static on all the cards and inner container color is dynamic — Hasnain Bhatti, Jul 05 '23 at 11:45

score 0 · Accepted Answer · answered Jul 05 '23 at 11:43

    Try this,

Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.red),
                    borderRadius: BorderRadius.circular(20.0)),
                clipBehavior: Clip.antiAlias,
                width: 150,
                height: 150,
                padding: const EdgeInsets.only(bottom: 30),
                child: const Center(
                  child: Icon(
                    Icons.calendar_month_outlined,
                    size: 50,
                    color: Colors.red,
                  ),
                ),
              ),
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                child: Container(
                  alignment: Alignment.center,
                  padding: const EdgeInsets.all(8.0),
                  decoration: const BoxDecoration(
                    borderRadius:
                        BorderRadius.vertical(bottom: Radius.circular(20.0)),
                    color: Colors.red,
                  ),
                  child: Text(
                    'Employee Management',
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.white, height: 1),
                  ),
                ),
              )
            ],
          )

Container border is not cliping in flutter

3 Answers3