简体   繁体   中英

How to create Inner rounded Box Flutter

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

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)

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM