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

Lovash

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.

Courthouse

Yep, the margin was the issue! Thank you very much for explaining the problem... :) – Lovash

Answer 2

This other answer is for those who need to continue with Container:

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle, // BoxShape.circle or BoxShape.retangle
    //color: const Color(0xFF66BB6A),
    boxShadow: [BoxShadow(
      color: Colors.grey,
      blurRadius: 5.0,
    ),]
  ),
  child: ...
),

Cirri

Answer 3

After a many tries I solved the problem.

// if scroll view overflow on other widget then use ClipRRect With Expanded.

    ClipRRect(
    child: Expanded(
    child: ListView(
    clipBehavior: Clip.none, //add this line inside AnyScrollView or ListView
      children:[
         Container(
             decoration: BoxDecoration(boxShadow: [
                BoxShadow(
                      offset: Offset(2, 2),
                      blurRadius: 12,
                      color: Color.fromRGBO(0, 0, 0, 0.16),
                )
               ]),
             child: Widgets(),
           ),
      ],
    ),
  ),
),

I face the same problem and i use this tricks and it's solved.

Elitism

Answer 4

The best and simple solution would be using Ink widget instead of Container in your case, since it will retain the shadow properties on scroll shadow will be visible.

new Ink(
        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))),
            ),
          ]
        ),
      ),

Middaugh

Answer 5

You can set your container as follows to give minimal shadow:

Container(
           decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.3),
                      blurRadius: 5.0,
                      offset: Offset(0.0, 3.0)
                    ),
                  ],
                  border: Border.all(color: AppColors.borderColor),
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(10.0)
                ),
          child: Text("Your desired widget here")  
)

Happy Fluttering !

Nankeen