How can I draw something like this inside a container in flutter?. PS I am new to flutter. Thanks in advance.
You can try this, the idea is using multiple quadraticBezierTo
. Remember that B, C, D should be on the same line to make the joint smooth:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Container(
width: 300,
height: 700,
color: Colors.yellow,
child: CustomPaint(painter: FaceOutlinePainter()),
),
),
),
);
}
}
class FaceOutlinePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.red
..style = PaintingStyle.stroke
..strokeWidth = 8.0;
Path path = Path();
path.moveTo(size.width / 2, 0); //Ax, Ay
path.quadraticBezierTo(size.width, size.height / 8, size.width / 2, size.height / 4); //Bx, By, Cx, Cy
path.quadraticBezierTo(0, 3 * size.height / 8, size.width / 2, size.height / 2); //Dx, Dy, Ex, Ey
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(FaceOutlinePainter oldDelegate) => false;
}