How to Write Vertical Text In Flutter

How to Write Vertical Text In Flutter ?

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:

"<yoastmark

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:

"<yoastmark

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:

"<yoastmark

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

Nirali Patel

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.

Leave a comment

Your email address will not be published. Required fields are marked *


ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

тЬУ Valid number тЬХ Invalid number
our share of the limelight

as seen on