Vertical Text widget for Flutter

Question

The TextDirection docs say:

Flutter is designed to address the needs of applications written in any of the world's currently-used languages, whether they use a right-to-left or left-to-right writing direction. Flutter does not support other writing modes, such as vertical text or boustrophedon text, as these are rarely used in computer programs. (emphasis added)

Not only does Flutter not support vertical text, it won't be officially supported in the future. This was an early design decision (see here and here).

Even so, there is a real use for vertical script support today. In addition to certain Chinese and Japanese uses, the traditional Mongolian script requires it. This script is very commonly used in computer programs in Inner Mongolia (example, example, example, example, example, example).

It is written top to bottom, and lines wrap left to right:

Additionally, emoji and CJK characters retain the their orientation when displayed vertically (not absolutely necessary, but preferred). In the image below, the top paragraph shows the current implementation and the bottom paragraph shows the correct vertical rendering:

// sample text
ᠨᠢᠭᠡ ᠬᠣᠶᠠᠷ ᠭᠣᠷᠪᠠ ᠳᠥᠷᠪᠡ ᠲᠠᠪᠤ ᠵᠢᠷᠭᠤᠭ᠎ᠠ ᠳᠣᠯᠣᠭ᠎ᠠ ᠨᠠ‍ᠢᠮᠠ ᠶᠢᠰᠦ ᠠᠷᠪᠠ one two three four five six seven eight nine ten 汉字 한국어 モンゴル語 English? ᠮᠣᠩᠭᠣᠯ︖

Since Flutter doesn't support vertical script, it must be implemented from scratch. All of the actual text layout and painting is done in the Flutter engine with LibTxt, so I can't change that.

What would it involve to create a top to bottom vertical Text widget?

Update

I'm still looking for an answer. Rémi's answer is good for single line text but doesn't work for multi-line text.

I'm currently researching three different possible solutions:

• Create a RenderObject subclass (or perhaps a RenderParagraph subclass) that backs a custom StatelessWidget similar to a RichText widget.
• Use a CustomPaint widget
• Make a composited widget of a ListView (one row per text line), Text widgets and WidgetSpans.

All of those would involve measuring the text, laying it out, and getting an list of lines.

Another update

I'm currently leaning toward making a custom widget and render object that will mimic RichText and RenderParagraph. Under the hood RenderParagraph uses a TextPainter to layout and paint the text. My problem now is that TextPainter is tightly coupled to the underlying Skia LibTxt library. That is where all the actual layout and painting happens. Laying out the text in anything besides the default ltr and rtl is proving to be a big problem.

Yet another update

The accepted answer meets the criteria I put forth in this question. I think it will meet short term needs. I have some reservations for things like applying text style, but I will need to do more tests. Long term I may still try to do custom text layout and painting.

Answer 1

This solution is based on a flex-box layout. It converts the string to a list of words and puts them in vertically rotated Text widgets. These are laid out with a Wrap widget set to Axis.vertical. The Wrap widget automatically handles words that need to wrap by putting them in the next column.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Wrap(
          direction: Axis.vertical,
          children: _getWords(),
        ),
      ),
    );
  }

  List<Widget> _getWords() {
    const text =
        "That's all  12345 One Two Three Four Five ᠸᠢᠺᠢᠫᠧᠳᠢᠶᠠ᠂ ᠴᠢᠯᠦᠭᠡᠲᠦ ᠨᠡᠪᠲᠡᠷᠬᠡᠢ ᠲᠣᠯᠢ ᠪᠢᠴᠢᠭ ᠪᠣᠯᠠᠢ᠃";
    var emoji = RegExp(r"([\u2200-\u3300]|[\uD83C-\uD83E].)");
    List<Widget> res = [];
    var words = text.split(" ");
    for (var word in words) {
      var matches = emoji.allMatches(word);
      if (matches.isEmpty) {
        res.add(RotatedBox(quarterTurns: 1, child: Text(word + ' ')));
      } else {
        var parts = word.split(emoji);
        int i = 0;
        for (Match m in matches) {
          res.add(RotatedBox(quarterTurns: 1, child: Text(parts[i++])));
          res.add(Text(m.group(0)));
        }
        res.add(RotatedBox(quarterTurns: 1, child: Text(parts[i] + ' ')));
      }
    }
    return res;
  }
}

Answer 2

It's simple use RotatedBox

RotatedBox(
  quarterTurns: 1,
  child: //your text
),

Answer 3

Sideway text is possible using RotatedBox, which is enough for the text to correctly wrap as you'd expect.

Row(
  children: <Widget>[
    RotatedBox(
      quarterTurns: 1,
      child: Text(sample),
    ),
    Expanded(child: Text(sample)),
    RotatedBox(
      quarterTurns: -1,
      child: Text(sample),
    ),
  ],
),

Similarly, Flutter now supports inline widgets inside text. This can be used to rotate smileys inside a text.

RotatedBox(
  quarterTurns: 1,
  child: RichText(
    text: TextSpan(
      text: 'Hello World',
      style: DefaultTextStyle.of(context).style,
      children: [
        WidgetSpan(
          child: RotatedBox(quarterTurns: -1, child: Text('')),
        )
      ],
    ),
  ),
),

Answer 4

If you make custom font with all symbols rotated by 180° (hard part), then you can simple change textDirection to TextDirection.rtl (right-to-left) and rotate text by one quarter (not easy too).

Answer 5

Its Simple draw what you want

Examples flutter-widget-positioning-guide

then

Column(
    children: [
        MyWidget(),
        MyWidget(),
        MyWidget()
    ]
);

// or swap a Column for a Row to flip the axis

Row(children: [ ]);

// and this is all just sugar for the Flex widget
Flex(
    direction: Axis.vertical<--------------
)

Answer 6

I ended up creating a custom widget to handle text rendering.

• The package is here: https://pub.dev/packages/mongol
• I described how I made the package here: https://www.raywenderlich.com/4562681-flutter-text-rendering

It wasn't a trivial task, but it is flexible. Other visitors to this question can follow a similar pattern if the other answers don't meet your needs.

If you would like more control over text rendering in Flutter, read My First Disappointment with Flutter and add a comment to this GitHub issue.