flutterdart

Flutter: Cropped Shadows on ListView


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.

ListView Shadow Cropped

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

Solution

  • I finally managed to work around the issue by using a Card instead of Center widget in my WidgetBuilder/Container.