Drawing text in a specific spot using flutter - flutter

Question

For text drawing on canvas, a fairly simple construction can be used:
void drawName(Canvas context, String name, double x, double y)
{
TextSpan span = new TextSpan(
style: new TextStyle(color: Colors.blue[800], fontSize: 24.0,
fontFamily: 'Roboto'), text: name);
TextPainter tp = new TextPainter(
text: span, textAlign: TextAlign.left, textDirection: `
` TextDirection.ltr);
tp.layout();
tp.paint(context, new Offset(x, y));
}
Is it possible to draw text at an angle, for example 45 degrees, or 90 degrees (vertically from the bottom up)?

Answer 1

To rotate text on a canvas, you can use canvas transforms rather than rotating the entire canvas.
That looks something like this:
#override
void paint(Canvas canvas, Size size) {
// save is optional, only needed you want to draw other things non-rotated & translated
canvas.save();
canvas.translate(100.0, 100.0);
canvas.rotate(3.14159/4.0);
TextSpan span = new TextSpan(
style: new TextStyle(color: Colors.blue[800], fontSize: 24.0,
fontFamily: 'Roboto'), text: "text");
TextPainter tp = new TextPainter(
text: span, textDirection: TextDirection.ltr);
tp.layout();
tp.paint(canvas, new Offset(0.0, 0.0));
// optional, if you saved earlier
canvas.restore();
}
Note that I'm translating then rotating, because if you translate after or even use the offset you'll probably get a different result than what you want. Also, once you start using transforms (translate & rotate) you probably want to save the transform state and then restore after you draw whatever you want transformed, at least if you're drawing anything other than the rotated text.

Answer 2

It sounds like you are looking for a Transformation. There is a general Transform Widget, but there is also a more specific RotatedBox Widget that sounds like it will be a perfect fit for you.
new RotatedBox(
quarterTurns: 3,
child: const Text('Hello World!'),
)
If you need more control over the rotation (to use something other than 90 degree increments) you should be able to achieve this the Transform Widget and a Matrix4.rotationZ
new Container(
color: Colors.blue,
child: new Transform(
transform: new Matrix4.rotationZ(-0.785398),
child: new Container(
padding: const EdgeInsets.all(8.0),
color: const Color(0xFFE8581C),
child: const Text('Apartment for rent!'),
),
),
)

Answer 3

A function that draws text at a specified angle:
void drawText(Canvas context, String name, double x, double y, double angleRotationInRadians)
{
context.save();
context.translate(x, y);
context.rotate(angleRotationInRadians);
TextSpan span = new TextSpan(
style: new TextStyle(color: Colors.blue[800], fontSize: 24.0,
fontFamily: 'Roboto'), text: name);
TextPainter tp = new TextPainter(
text: span, textAlign: TextAlign.left,
textDirection: TextDirection.ltr);
tp.layout();
tp.paint(context, new Offset(0.0,0.0));
context.restore();
}
PS."rmtmckenzie", thank a lot for your help.