I just wanted to create a horizontal ListView in Flutter with some BoxShadows to recreate a 'neomorphism' effect.
I then realized that the shadows on the ListView Items are cropped at the edges. I already tried to adjust all kind of different paddings and margins but the problem persisted.
The weird thing is: Cards that were the Image Assets couldn't be loaded render the Shadow perfectly fine.
class _DrinkListState extends State<DrinkList> {
@override
Widget build(BuildContext context) {
return Container(
child: ListView.builder(
padding: EdgeInsets.all(30),
physics: AlwaysScrollableScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: this.widget.availableDrinks.length,
itemBuilder: (BuildContext context, int index) => Container(
child: Center(
child: LimitedBox(
child: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Container(
child: Center(
child: Container(
child: Image.asset("assets/" +
this
.widget
.availableDrinks[index]
.imageName),
),
),
),
),
Expanded(
flex: 1,
child:
Text(this.widget.availableDrinks[index].label))
],
),
)),
margin: EdgeInsets.symmetric(horizontal: 20),
decoration: neodec,
padding: EdgeInsets.all(20),
width: 200,
)),
height: 300);
}
}
My BoxDecoration:
BoxDecoration neodec = BoxDecoration(
color: Color.fromRGBO(246, 246, 246, 1),
boxShadow: [
BoxShadow(color: Colors.black12, offset: Offset(10, 10), blurRadius: 10),
BoxShadow(color: Colors.white, offset: Offset(-10, -10), blurRadius: 10)
],
borderRadius: BorderRadius.all(Radius.circular(20)));
I finally managed to work around the issue by using a Card instead of Center widget in my WidgetBuilder/Container.