flutterflutter-container

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

Solution

  •     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),
                      ),
                    ),
                  )
                ],
              )