I want to add a shadow to a ClipRRect in Flutter. I want it to look like this:

App with shadow

But when I try building it I get something like this:

enter image description here

The shadow is going across the whole box instead of the ClipRRect area. Here is my code:

Column(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: Color(0x54000000),
                spreadRadius: 10,
                blurRadius: 2,
              ),
            ],
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.only(bottomLeft: Radius.circular(250)),
            child: Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      end: Alignment.bottomCenter,
                      begin: Alignment.topCenter,
                      colors: [
                    Theme.of(context).primaryColor,
                    Color(0xff995DFF)
                  ])),
              height: 500,
              width: MediaQuery.of(context).size.width,
            ),
          ),
        )
      ],
    )

Somehow the shadow needs to be just on the ClipRRect. Thanks for any help


Solution 1: Renê Guilherme Nucci

This happens because the container that has shadown is a rect as default shape...

An option is put BorderRadius in decoration of container father like this:

        Column(
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                //Here goes the same radius, u can put into a var or function 
                borderRadius: 
                    BorderRadius.only(bottomLeft: Radius.circular(250)),
                boxShadow: [
                  BoxShadow(
                    color: Color(0x54000000),
                    spreadRadius:4,
                    blurRadius: 20,
                  ),
                ],
              ),
              child: ClipRRect(
                borderRadius:
                    BorderRadius.only(bottomLeft: Radius.circular(250)),
                child: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      end: Alignment.bottomCenter,
                      begin: Alignment.topCenter,
                      colors: [
                        Theme.of(context).primaryColor,
                        Color(0xff995DFF)
                      ],
                    ),
                  ),
                  height: 500,
                  width: MediaQuery.of(context).size.width,
                ),
              ),
            )
          ],
        ),