Can to draw text at an angle using flutter?

[micrcx]

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

[rmtmckenzie]

Assuming you want the entire block of text rotated and not each individual letter, you can use canvas transforms, in particular rotate and translate. Be careful about which order you use them, and you should look at canvas.save() and canvas.restore() as they'll make sure that your transforms don't leak out of the drawName function (i.e. if you save first, then do transforms, do any painting, then restore, the next time you paint it will do it straight and from the top left. If you just do transforms, the next time you paint it will also be rotated/translated which probably isn't want you want).

I'm fairly sure that the canvas works similarly to the HTML5 canvas, so this tutorial any a quick google for 'canvas rotate' will help you out. If you really want to get fancy, the canvas api does allow for saving & restoring layers as well.

Is there any reason that you're drawing directly on to a canvas though? I get that you might have a complicated case, but most things are doable with just flutter widgets i.e. you could use transform to rotate the text.

BTW - you'd probably be better off asking Q&A questions either on StackOverflow, the mailing list, or one of the realtime chats - you'll get a quicker response and not clutter up the issues which are really meant for bugs and feature requests. This page has links to the various communication channels for flutter =).

[realcarlos]

How to implement vertical-rl in flutter?

[Hixie]

We don't support vertical text layout. You can rotate the text and do horizontal text layout at 90° (see the "RotatedBox" widget), but that's as close as we get to vertical text layout.

[Hixie]

Duplicate of #14262.

[CrazyCoderShi]

hey @realcarlos @micrcx
I also encountered the same problem yesterday.
I implemented this effect in a very funny way.

class VerticalText extends StatelessWidget {
  VerticalText({Key key, this.text, this.color, this.size}) : super(key: key);

  final double size;
  final String text;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size,
      child: Text(
        text,
        style: TextStyle(
          fontSize: size,
          color: color,
          height: 0.85,
          fontWeight: FontWeight.w300,
        ),
      ),
    );
  }
}

The effect is as follows

[jlcool]

@Hixie We need this feature
@CrazyCoderShi 你这个不行啊，怎么使用的？

[CrazyCoderShi]

@jlcool https://github.com/CrazyCoderShi/judou

[jlcool]

@CrazyCoderShi 是我的父级 设置了宽度，现在可以了，感谢

[CrazyCoderShi]

@jlcool 能对你有帮助就好

[Hixie]

Sideways text is possible using the Transform.rotate widget, or RotatedBox.

Vertical text (as in, full CJK vertical text typography) is something we decided early on to not do. Sorry. It is something that, to do right, you have to bake in right from the start, and it massively complicates the layout system, which has implications on performance for all applications. If you just want something simple (for example just one sequence of a few ideographs vertically) you can fake it by putting newlines between each character and making the text box narrow. This is not "real" vertical text, but it can do at a pinch. If you want "real" vertical text, with emphasis marks and ruby and inline horizontal bidi text and everything, then the best I can offer is that you could try to write a package to support this using what poor primitives we have provided, but it probably won't be a satisfactory experience.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.