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