CODEWITHSUNDEEP
flutter
Michael Kanzieper
Michael Kanzieper

Reputation: 889

Drawing text in a specific spot using flutter

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)?

Upvotes: 3

Views: 6085

Answers (3)

Michael Kanzieper
Michael Kanzieper

Reputation: 889

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.

Upvotes: 1

rmtmckenzie
rmtmckenzie

Reputation: 40433

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.

Upvotes: 3

Ashton Thomas
Ashton Thomas

Reputation: 17799

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!'),
        ),
      ),
    )

Upvotes: 0

Related Questions