Flutter - Container BoxShadow disappears on scroll in a ListView

Question

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

Answer 1

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.