Flutter Material elevation in Special form - flutter

Question

I have a special clipper form (picture)
and I want to create a shadow around it. For that, I tried it with this:
Material(
elevation: 10,
child: ClipPath(
clipper: RoundedDiagonalPathClipper(),
child: Transform.scale(
scaleX: 1,
scaleY: -1,
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(
25.0,
),
),
color: Colors.white,
),
...... more code, not important for this ....
But then it creates a normal container around the special form. I found the option "clip Behaviour, but I don't know if this is my solution. Can you help me? Or is there a other way of creating a shadow around this box?

Answer 1

A simple way is creating a Shadow and shifting your clipper by offset.
Create a ClipShadowPath class like this.
import 'package:flutter/material.dart';
#immutable
class ClipShadowPath extends StatelessWidget {
final Shadow shadow;
final CustomClipper<Path> clipper;
final Widget child;
ClipShadowPath({
#required this.shadow,
#required this.clipper,
#required this.child,
});
#override
Widget build(BuildContext context) {
return CustomPaint(
key: UniqueKey(),
painter: _ClipShadowShadowPainter(
clipper: this.clipper,
shadow: this.shadow,
),
child: ClipPath(child: child, clipper: this.clipper),
);
}
}
class _ClipShadowShadowPainter extends CustomPainter {
final Shadow shadow;
final CustomClipper<Path> clipper;
_ClipShadowShadowPainter({#required this.shadow, #required this.clipper});
#override
void paint(Canvas canvas, Size size) {
var paint = shadow.toPaint();
var clipPath = clipper.getClip(size).shift(shadow.offset);
canvas.drawPath(clipPath, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
Here is usage:
Widget buildBodyWidget(BuildContext context) {
return ClipShadowPath(
////*** Your Custom clip path *****
clipper: RoundedDiagonalPathClipper(),
/// Blur property of Shadow class
shadow: Shadow(
blurRadius: 5
),
child: Transform.scale(
scaleX: 1,
scaleY: -1,
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(
25.0,
),
),
color: Colors.white,
),
);
}