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

score 39 · Answer 1 · edited Mar 06 '20 at 13:14

39

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: ...
),

edited Mar 06 '20 at 13:14

Philippe Fanaro

6,148
6
38
76

answered May 22 '19 at 02:47

Edeson Bizerril

1,595
1
11
12

Collin Jackson · Accepted Answer · 2017-05-07T16:20:41.083

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.

Yep, the margin was the issue! Thank you very much for explaining the problem... :) — OhMad, May 07 '17 at 18:34

score 3 · Answer 3 · answered Jul 31 '21 at 20:05

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.

score 1 · Answer 4 · answered Jul 04 '22 at 10:34

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))),
            ),
          ]
        ),
      ),

score 0 · Answer 5 · answered Jan 11 '23 at 10:07

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 !

Flutter - Container BoxShadow disappears on scroll in a ListView

5 Answers5