Center an Item on Canvas using CustomPaint - flutter

Question

I've tried to center items in a Canvas using the CustomPainter in Flutter, ranging from TextPaints to even plain circles.
Normally, when centering a custom paint, I'd set the Offset to Offset(size.width/2, size.height/2). But it's not working and my item is drawn towards the bottom right of the canvas.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(home: Container(
child: LayoutBuilder(builder: (context, constraints) {
return Container(
width: constraints.widthConstraints().maxWidth,
height: constraints.widthConstraints().maxHeight,
child: CustomPaint(
painter: FollowPainter(),
),
);
}),
));
}
}
class FollowPainter extends CustomPainter {
static final fill = Paint()..color = Colors.black;
#override
void paint(Canvas canvas, Size size) {
TextSpan span = new TextSpan(
style: new TextStyle(
color: Colors.black, fontSize: 50, fontWeight: FontWeight.w700),
text: 'Hello World');
TextPainter tp = new TextPainter(
text: span,
textAlign: TextAlign.left,
textDirection: TextDirection.ltr);
tp.layout();
tp.paint(canvas, new Offset(size.width / 2, size.height / 2));
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
throw UnimplementedError();
}
I suspect that the problem could be the fact that I'm starting the drawing from that Offset, instead of drawing from the center.
So how can I center a drawn widget in the CustomPainter?

Answer 1

I suspect that the problem could be the fact that I'm starting the drawing from that Offset, instead of drawing from the center.
You're right, just subtract half of the width of the text from width and half of its height from height.
tp.paint(canvas, new Offset(size.width / 2 - tp.width / 2, size.height / 2 - tp.height / 2));