fluttershadowelevationclipper

Flutter: ClipOval clipper elevation


Bottom Shadow

Hi I am new to flutter and trying to create this design from Shakuro of dribble. I am getting trouble trying to create elevation for the clipper because the whole rectangle is getting the shadow instead of the clipper only.

Is there a way to put elevation or similar effect like shadow underneath the clipper?


Solution

  • You can wrap your child inside a Container with Circle shape in your BoxDecoration like this:

      new Container(
                height: 300.0,
                width: 300.0,
                child: Center(child: Text("Your child here")),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                        color: Colors.grey,
                        blurRadius: 5.0,
                        offset: Offset(5.0, 5.0),
                        spreadRadius: 5.0)
                  ],
                ),
              )
    

    Result:

    enter image description here