Menu
When I create a Container with box shadow inside a ListView (scrolls Horizontally), the shadow looks fine, but, when I add multiple Containers inside the ListView, their shadows(just shadows, not Container) gets cropped at top and bottom.
Please also note that this whole ListView is wrapped under a parent Container.
I tried to increase the height of Parent Container(in which the whole ListView is wrapped), but it increases the height of child Container with its shadow still cropped.
I also tried to give padding to Parent Container but, it still shadow still gets cropped.
Maybe I need to wrap the ListView inside any other Widget which can get the job done without the problem.
Container(
// padding: EdgeInsets.only(left: 30.0, right: 0.0),
height: 140.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),
I expect the ListView to have Containers(as custom Cards) to have proper BoxShadow, but in the actual output, Containers' BoxShadow gets cropped from both Top & Bottom.
882
offset: Offset class is the object given to this property which controls the extent to which the shadow will be visible. spreadRadius: This property also takes in a double value as the object to decide the extent to which the box should be inflated before applying the blur.
Here are the steps to add shadow to the Container widget: Step 1: Add the Container widget. Step 2: Add the decoration parameter (inside Container) and assign the BoxDecoration class. Step 3: Add the boxShadow parameter (inside BoxDecoration) and assign the BoxShadow class.
As @Zahra wrote,
adding clipBehavior: Clip.none, to the ListView, solved the problem.
The crop happens only when your widgets exceed the screen size
148
Okay I found the solution myself.
Steps to fix the problem
Create several Container(as a card) with some width and with a BoxShadow of Radius 10.0. Lets call it Child Container.
Create a ListView with Horizontal scroll axis. Put Child Containers made above in this ListView.
Now wrap the ListView inside a new Container(Lets call it Parent Container) to give ListView a height. If you want your Child Containers to be of height 140.0, then make your Parent Container's height 160.0, which includes radius of BoxShadow of 10.0 on top & bottom each(10.0+ 140.0 + 10.0).
Now give padding to your ListView of 10.0 on both top & bottom.
Problem Solved (Silly Me).
Sample Code here
Container(
height: 160.0,
child: ListView(
padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/boot.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/gloves.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'Highly Durable',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Gloves',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/glove.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
// height: 140.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black12,
)
],
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child:
Image.asset('assets/images/helmet.png'),
),
Container(
padding:
EdgeInsets.only(top: 20.0, bottom: 20.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'German Hat',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Riding Helmet',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w400,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.0,
width: 150.0,
color: Color(0xff643523),
),
SizedBox(
height: 12.0,
),
Row(
children: <Widget>[
SizedBox(
width: 110.0,
),
Container(
height: 30.0,
width: 30.0,
child: Image.asset(
'assets/images/helmeticon.png'),
),
],
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With