Flutter Material elevation in Special form-CodePudding

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?

CodePudding user response：

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,
              ),
    );
  }