Flutter - Container BoxShadow disappears on scroll in a ListView

dart, dropshadow, flutter, listview

Solution

I was trying to reproduce the issue, and I noticed that you didn't put any margin on your Container. Most likely the other items in your `ListView` are covering up your manually drawn shadow because it's being drawn outside the bounds of your `Container`.

I would recommend that you use a `Card` instead of a container. You can get a natural-looking material shadow using the `elevation` constructor argument. Cards come with some built-in margin, and you can add more by enclosing it in a `Container` if you want. This will give you enough space for the shadow to be visible. You can control the color of the `Card` with the `color` constructor argument.

The corners of a `Card` are slightly rounded. If you don't want rounded corners, you're going to be going off spec from Material design, but you could try enclosing a `Material` with a `type` of `MaterialType.canvas` inside a `Container`.

Problem

This is what my Container looks like: ``` new Container( width: 500.0, height: 250.0, padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0), decoration: new BoxDecoration( color: const Color(0xFF66BB6A), boxShadow: [new BoxShadow( color: Colors.black, blurRadius: 20.0, ),] ), child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: [ new Container( padding: new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 10.0), child: new Text("Testtext", style: new TextStyle(fontSize: 30.0, fontFamily: "Barrio", color: new Color.fromARGB(255, 230, 230, 230))), ), ] ), ), ``` It is inside a ListView with some other Containers. As soon as I start scrolling through the ListView, the shadow just disappears. When loading the view tho, it appears correctly. Any thoughts on this problem? Thanks

Original source