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

-1

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))),
                              ),
                            ),
                          ),
                        ),
                      );
                    }),
              )
flutter
dart
asked on Stack Overflow Aug 28, 2020 by Boffin Coders • edited Aug 28, 2020 by Boffin Coders

2 Answers

1

this might help

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

Ref Stackoverflow ref

answered on Stack Overflow Aug 28, 2020 by Aman Chaudhary
0

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

answered on Stack Overflow Aug 28, 2020 by sAgar92

User contributions licensed under CC BY-SA 3.0