How to Write Vertical Text In Flutter ?

• General

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 boustrophedon texts, as these are rarely used in computer programs. So in today’s article, we will go through How to Write Vertical Text In Flutter.

How to Write Vertical Text In Flutter?

To create vertical Text in flutter 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.

So 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;
  }

So the above code will generate output like the below:

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

Code Snippet will look like the below:

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

The above code will generate output like the below:

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

Consider a code snippet like the below:

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

So we will get output like a below:

A better approach is to use TextPainter and rotate canvas before rendering. You’ll have much more control and the widget will be easier to use. Also, it would be possible to have “wrap_content” behavior.

Conclusion:

Thanks for being with us on a Flutter Journey !!!

So in this article, we have been through how to write the vertical text in flutter.

Still, confused about something in flutter?? Do let us know in the comment section…

Keep Learning !!! Keep Fluttering !!! Stay Connected !!!

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.