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

Container border is not cliping in flutter

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),
          ),
        ),
      )
    ],
  ),
);
Tags:

3

Answers


  1. 0 
    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),),
            )
          ],
        ),
      )
    Login or Signup to reply.
  2. 0

    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:

    enter image description here

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

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

Back To Top
Search