How to create container with box shadow at bottom and all sides

Question

I tried to create a container with box shadow but not able to get same result as I want. This is i achieved but i want to show shadow with rounded edges and one of my horizontal list with bottom shadow and 2nd with all side shadow. I also need low thickness of shadow. My lists have background image and text. Please help me how to achieve this.

My Code

 Container(
                height: 180.0,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemCount: response.data.length,
                    itemBuilder: (context, index) {
                      return GestureDetector(
                        behavior: HitTestBehavior.translucent,
                        onTap: () {},
                        child: Container(
                          decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: CachedNetworkImageProvider(
                                    response.data[index].imageUrl,
                                  ),
                                  fit: BoxFit.fill)),
                          margin: EdgeInsets.only(bottom: 6.0, right: 10.0),
                          width: MediaQuery.of(context).size.width - 100,
                          child: Container(
                            width: MediaQuery.of(context).size.width - 100,
                            margin: EdgeInsets.only(left: 8.0, right: 6.0),
                            decoration: BoxDecoration(
                              boxShadow: <BoxShadow>[
                                BoxShadow(
                                    color: Color(0xff000000).withOpacity(.9),
                                    blurRadius: 10.0,
                                    spreadRadius: 2.0,
                                    offset: Offset(0.0, 180))
                              ],
                            ),
                            child: Padding(
                              padding: const EdgeInsets.fromLTRB(
                                  10.0, 35.0, 5.0, 0.0),
                              child: Text(
                                response.data[index].name.toUpperCase(),
                                style: GoogleFonts.roboto(
                                    textStyle: TextStyle(
                                        fontSize: 15,
                                        fontWeight: FontWeight.bold,
                                        color: Color(0xffFFFFFF))),
                              ),
                            ),
                          ),
                        ),
                      );
                    }),
              )

`offset: Offset(0.0, 180)` - it pushes shadow 180 pixels to the bottom which is not what you want i assume? — pskink, Aug 28 '20 at 07:12

score 1 · Answer 1 · answered Aug 28 '20 at 06:02

this might help

boxShadow: [
              BoxShadow(
                  color: Colors.grey.withOpacity(0.5),
                  spreadRadius: 2,
                  blurRadius: 3,
                  offset: Offset(0, 4)),
            ],

Ref Stackoverflow ref

score 0 · Answer 2 · answered Aug 28 '20 at 05:39

0

use offset property of BoxShadow to control how the shadow should be visible and radius property to control thickness of the shadow.

answered Aug 28 '20 at 05:39

sAgar92

11

1

for this type of vague answers use ``comment`` – OMi Shah Aug 28 '20 at 05:43
Can you give a bit more information? Sample code would help. – Clinton Aug 28 '20 at 08:43

How to create container with box shadow at bottom and all sides

2 Answers2