Home > database >  How to add rounded solid shadow with border to card in flutter?
How to add rounded solid shadow with border to card in flutter?

Time:10-08

I have been trying to add a box shadow with solid color and border to a card which is inside a container but so far i am not able to get the desired result.

Desired Result

This is the widget that i am trying to re-create.

What i am able to do till now

My implementation of the deign

I tried adding box shadow with offset but i am not getting the desired result. So below is my implementation of the container

Container(
                        width: 120,
                        height: 40,
                        decoration:  BoxDecoration(
                          boxShadow: [

                            BoxShadow(

                              color: Colors.black.withOpacity(0.5),
                              blurRadius: 4.0,
                                offset: Offset(3.5, 3.5,),
                              blurStyle: BlurStyle.normal
                            ),
                          ],
                        ),
                        child: const Card(
                          child: Center(
                            child: Text("1-6 Months"),
                          ),
                        ),
                      ),

Any idea of how to do it or better yet the code itself would be much appreciated.

CodePudding user response:

I think you should use a Stack widget and two Card widgets in the children field to get this result.

CodePudding user response:

 Container(
               height: 80,width: 80,
                decoration:  BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.black,
                  boxShadow: [
                      BoxShadow(
                        color: Colors.black45,
                        spreadRadius: 1,
                        blurRadius: 0,
                        offset: Offset(4,4), // changes position of shadow
                      ),
                    
                  ],
                ),
                child:  Center(
                    child: Text("1-6 Months",style: TextStyle(color: Colors.white),),
    
                ),
              ),
  • Related