Rotate painted text about its center


I’m trying to rotate text painted on a Canvas about it’s center. Instead, in the below code, the text rotates about the top left corner of the text when I press the floating button.

Pressing the button increments the angle, which is passed to CanvasPainter to draw the text.

The rectangle’s top left corner should be initially positioned at offset.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();

class _MyAppState extends State<MyApp> {
  double _angle = 0;
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: CustomPaint(
            painter: CanvasPainter(_angle),
            child: Container(),
        appBar: AppBar(title: Text('Test')),
        floatingActionButton: FloatingActionButton(
          onPressed: () => setState(() => _angle += .1),
          child: const Icon(Icons.add),

class CanvasPainter extends CustomPainter {
  final double angle;
  final Offset offset = Offset(50, 50);
  void paint(Canvas canvas, Size size) {
    final fill = TextPainter(
      text: TextSpan(text: 'This is a test', style: TextStyle(fontSize: 80)),
      textDirection: TextDirection.rtl);
    //canvas.translate(-fill.width/2, -fill.height/2);
    canvas.translate(offset.dx, offset.dy);
  bool shouldRepaint(CustomPainter oldDelegate) => true;


this is what you have to do:

final pivot =; 
canvas.translate(pivot.dx, pivot.dy); 
canvas.translate(-pivot.dx, -pivot.dy);
fill.paint(canvas, offset);

Answered By – pskink

Answer Checked By – Robin (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *