Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Flutter Material elevation in Special form

I have a special clipper form (picture)elevcatio

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?

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading