Material elevation not working after clipping

Question

Material widget's elevation not working after wrapping it into ClipPath.

Before clipping.

After clipping.

Anyone knows why this is happening?

Here is my code.

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: ClipPath(
            clipper: MyCustomClipper(),
            child: Material(
              child: SizedBox(height: 100.0, width: 100.0),
              color: Colors.lightBlue,
              elevation: 8.0,
            ),
          ),
        ),
      ),
    );
  }
}

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double x = size.width;
    double y = size.height;
    Path path = Path()
      ..lineTo(0, y)
      ..lineTo(x, y - 20.0)
      ..lineTo(x, 0)
      ..lineTo(0, 0)
      ..close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

That's the expected behavior. You don't want to clip, but to change the shape. See `shape` property of `Material` — Rémi Rousselet, Mar 05 '19 at 15:11
I have seen `shape` property of `Material` that takes an abstract type of `ShapeBorder` and there are some predefined shapes like `OutlineInputBorder` but i want only this shape with elevation and creating this shape i have to extend `ShapeBorder` and override some methods of it. It is little bit hard. Is there any other way to achieve this shape with elevation? — Mayur Prajapati, Mar 06 '19 at 05:50
@RémiRousselet so there is no way to have elevation shadow and custom clipped shape of material? — frozzyk, Nov 27 '19 at 08:13
@frozzyk Yes. Clipping does not differentiate between the shadow and the content. You need a solution that is not clip based — Rémi Rousselet, Nov 27 '19 at 12:34

score 3 · Answer 1 · answered Jul 25 '20 at 14:36

I had the very same problem.

here is what I did, wrap the ClipPath widget inside Material Widget,

give color as --> Colors.transparent, //this is very important

set --> elevation:100

Here is output of my own ClipPath bottom Nav Bar

Hope it helps someone.

Material elevation not working after clipping

1 Answers1