TabBar 固定容器阴影在 flutter 中垂直滚动时从 ListView 下降

Question

I want to add a bit shadow to my Container, which I have done using Material Widget or BoxShadow but in column at bottom of fixed container I have expanded Listview when I scroll up vertically container shadow goes down of Listview which I do not want I want Shadow to appear on top of ListView Items as we Scroll vertically, That's all please help me out

...Here is my code

Material(
              elevation: 2,
               child: Container(
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.red,
                      blurRadius: 2,
                      spreadRadius: 2,
                      offset: Offset(0,2),


                    ),


                  ],
                ),
                height: SizeConfig.isLargeScreen ? 60.h : 105.h,
                width: double.infinity,
                child: !SizeConfig.isLargeScreen),),

Note : I have given elevation 3 to my Listview card as well, Please let me know what i can do to make this container shadow go above Listview while Scrolling Vertically

Answer 1

1. I guess this can be solved by using padding widget, know more about the padding widget in ( https://youtu.be/oD5RtLhhubg ).

2. Another way to handle the issue adding a listView with separator, divider.

3. Still the problem continues check with margin of the container.

4. Finally on top of all since this is about container shadow you can try with the offset value in boxshadow property.

5. share with us, which method helps you to solve the issue or how did you solved the issue by trying something different.

Answer 2

You have two ways to solve this issue the first one is to wrap your Material widget with Padding widget like this:

Padding(
    Material(
          elevation: 2,
           child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.red,
                  blurRadius: 2,
                  spreadRadius: 2,
                  offset: Offset(0,2),


                ),


              ],
            ),
            height: SizeConfig.isLargeScreen ? 60.h : 105.h,
            width: double.infinity,
            child: !SizeConfig.isLargeScreen),),),

or simply add SizedBox(height: 20,), under the Material widget it will make some space between the Material widget and the ListView then it will solve your issue