flutterdartborderboxcustom-painter

How to create Inner rounded Box Flutter


How can I make a Box like this the easiest way? Shape

I tried a lot with CustomPainter and Arcs or CustomClippers but failed. I know its possible with those techniques but I could not manage to do it. (Please include the code if possible I lost way too much time on this already)


Solution

  • class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
       return MaterialApp(
       title: 'Drawing Paths',
       home: Container(
         color: Colors.white,
         child: CustomPaint(
           painter: CurvePainter(),
          ),
         ),
        );
       }
      }
    
    class CurvePainter extends CustomPainter {
    @override
    void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Colors.green[800];
    paint.style = PaintingStyle.fill; // Change this to fill
    
    Path path = Path();
    path.moveTo(0, size.height * 0.5);
    path.quadraticBezierTo(0, size.height * 0.2, 0, size.height * 0.1);
    path.lineTo(size.width, size.height * 0.1);
    path.lineTo(size.width, size.height * 0.5);
    path.quadraticBezierTo(
        size.width * 0.5, size.height * 0.25, 0, size.height * 0.5);
    path.close();
    
    canvas.drawPath(path, paint);
    }
    
     @override
     bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
    }
    }