I have been trying to add a box shadow with solid color and border to a card which is inside a container but so far i am not able to get the desired result.
Desired Result
What i am able to do till now
I tried adding box shadow with offset but i am not getting the desired result. So below is my implementation of the container
Container(
width: 120,
height: 40,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.5),
blurRadius: 4.0,
offset: Offset(3.5, 3.5,),
blurStyle: BlurStyle.normal
),
],
),
child: const Card(
child: Center(
child: Text("1-6 Months"),
),
),
),
Any idea of how to do it or better yet the code itself would be much appreciated.
CodePudding user response:
I think you should use a Stack
widget and two Card
widgets in the children
field to get this result.
CodePudding user response:
Container(
height: 80,width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.black,
boxShadow: [
BoxShadow(
color: Colors.black45,
spreadRadius: 1,
blurRadius: 0,
offset: Offset(4,4), // changes position of shadow
),
],
),
child: Center(
child: Text("1-6 Months",style: TextStyle(color: Colors.white),),
),
),