Shadows in a rounded rectangle in Flutter

Question

I tried adding a shadow to a rounded container but Flutter adds shadows as if the container is a perpendicular rectangle, which I don't want. I looked up for this problem on Google but couldn't find any appropriate solution, please help me out.

Code for Container

Container(
  width: MediaQuery.of(context).size.width * 0.82,
  height: MediaQuery.of(context).size.height * 0.28,
  padding: const EdgeInsets.symmetric(horizontal: 12),
  decoration: BoxDecoration(
    color: Color(0xFFF9D276),
    borderRadius: BorderRadius.circular(35),
    boxShadow: [
      BoxShadow(
        offset: Offset(0, 4),
        color: Color(0xFFF9D276).withOpacity(0.15),
        spreadRadius: 4,
        blurRadius: 50
      )
    ]
  ),
)

UPDATE Answer from @HardikKumar & How I actually want it

Answer 1

I'm sorry but I tested your code and the shadow shape appears with the same border as the decoration box

Image

I just edit the color of the shadow to black so i can see it better.

Maybe u want use a button like that , u need to use ButtonTheme to use height and width ,

Final edition:

Use Material , it has elevation property, shapeBorder and BorderRadiusGeometry, u can use an container as parent of Material for the width and height.

Link to Material Widget on Flutter

Answer 2

Problems in the code:

1. With the blurRadius of 50, you won't see any difference in shadow when you change the spreadRadius or the offset

2. With the opacity of 0.15, you will barely see any shadow (both in black or white backgound color)

Try this code:

Container(
  width: MediaQuery.of(context).size.width * 0.82,
  height: MediaQuery.of(context).size.height * 0.28,
  padding: const EdgeInsets.symmetric(horizontal: 12),
  decoration: BoxDecoration(
    color: Color(0xFFF9D276),
    borderRadius: BorderRadius.circular(35),
    boxShadow: [
      BoxShadow(
        //offset: Offset(0, 4),
        color: Color(0xFFF9D276), //edited
        spreadRadius: 4,
        blurRadius: 10  //edited
      )
    
  ),
),

How it looks like:

If you need anything else, just let me know.

Answer 3

You can use from this code for rounded rectangle :)

Container(
   width: MediaQuery.of(context).size.width * 0.82,
   height: MediaQuery.of(context).size.height * 0.28,
   decoration: BoxDecoration(
      color: Colors.green[700],
      shape: BoxShape.rectangle,
      borderRadius:BorderRadius.all(
          Radius.circular(25)
          )
      ),
       margin: EdgeInsets.only(right: 8,top: 8),
       child: IconButton(
         icon: Icon(
            Icons.send,
            color: Colors.yellow[600],
            ),
         onPressed:() {}
        ),
  )

Answer 4

As far I get some idea from your first image, you can check the code below.

    Center(
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15),
            color: Color(0xff000000),
            boxShadow: <BoxShadow>[
              new BoxShadow(
                color: Color(0x73000000),
                blurRadius: 5.0,
                spreadRadius: 1,
                offset: new Offset(-10.0, 0.0),
              ),
            ],
          ),
          width: MediaQuery.of(context).size.width * 0.82,
          height: MediaQuery.of(context).size.height * 0.25,
          child: Padding(
            padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
            child: Container(
              width: MediaQuery.of(context).size.width * 0.82,
              height: MediaQuery.of(context).size.height * 0.28,
//            padding: const EdgeInsets.symmetric(horizontal: 12),
              decoration: BoxDecoration(
                color: Color(0xFFF9D276),
                boxShadow: <BoxShadow>[
                  new BoxShadow(
                    color: Color(0xff000000),
                    blurRadius: 0.0,
                    spreadRadius: -2,
                    offset: new Offset(2.0, 0.0),
                  ),
                ],
                borderRadius: BorderRadius.circular(35),
              ),
            ),
          ),
        ),
      )

Answer 5

You can try this

              Stack(
                children: [
                  Container(
                    margin: EdgeInsets.only(left: 2, top: 2),
                    child: Align(
                      alignment: Alignment.center,
                      child: OutlinedButton(
                        style: OutlinedButton.styleFrom(
                          primary: Colors.red,
                          backgroundColor: Colors.gray,
                          fixedSize: const Size(200, 50),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(16.0),
                          ),
                          side: const BorderSide(width: 3.0, color: ColorsConst.gray9),
                        ),
                        child: const Text("Text"),
                        onPressed: () => print('Text'),
                      ),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(right: 2, bottom: 2),
                    child: Align(
                      alignment: Alignment.center,
                      child: OutlinedButton(
                        style: OutlinedButton.styleFrom(
                          primary: Colors.red,
                          backgroundColor: Colors.gray,
                          fixedSize: const Size(200, 50),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(16.0),
                          ),
                          side: const BorderSide(width: 3.0, color: ColorsConst.gray9),
                        ),
                        child: const Text("Text"),
                        onPressed: () => print('Text'),
                      ),
                    ),
                  )
                ]
              )