0

Am sharing my code also attaching the scrsht of what I am getting. anyone if know neumorphic design will know what I want to achieve.this is what I am getting for now : -

//This is my CustomClipClass
class CustomClipPath extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var height = size.height;
    var width = size.width;
    var path = Path();
    var roundFactor = 40.0;
    path.moveTo(0.0, height / 3);
    path.lineTo(0, height - roundFactor);
    path.arcToPoint(Offset(roundFactor, height),
        clockwise: false, radius: Radius.circular(roundFactor));
    path.lineTo(width - roundFactor, height);
    path.arcToPoint(Offset(width, height - roundFactor),
        clockwise: false, radius: Radius.circular(roundFactor));
    path.lineTo(width, roundFactor);
    path.quadraticBezierTo(width, 0, width - roundFactor * 3, roundFactor + 20);
    path.quadraticBezierTo(
        0, (height / 3) * 0.99, 0, (height / 3) + roundFactor);
    return path;
  }

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


this is my scaffold: 
   return Scaffold(
      backgroundColor: primaryColor,
      body: SafeArea(
          child: Center(
        child: Container(
          height: 300,
          width: 200,
          decoration: const BoxDecoration(boxShadow: [
            BoxShadow(
                offset: Offset(-20, -20),
                color: Color(0xff481d64),
                blurRadius: 20),
            BoxShadow(
                offset: Offset(20, 20),
                color: Color(0xff36154a),
                blurRadius: 20)
          ]),
          child: ClipPath(
            clipper: CustomClipPath(),
            child: Container(
              decoration: BoxDecoration(
                color: primaryColor,
              ),
            ),
          ),
        ),
      )),
    );
 

I am expecting to have a neumorphic look for my custom clipped widget using the boxshadow .

Ramji
  • 904
  • 2
  • 5
  • 20

0 Answers0