Виджет вертикального текста для Flutter

Это решение основано на макете flex-box. Он преобразует строку в список слов и помещает их в вертикально повернутые текстовые виджеты. Они размещены с виджетом Wrap, установленным на Axis.vertical. Виджет «Перенос» автоматически обрабатывает слова, которые необходимо перенести, помещая их в следующий столбец.

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

Боковой текст можно использовать с помощью RotatedBox, чего достаточно для правильного переноса текста, как и следовало ожидать.

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

Точно так же Flutter теперь поддерживает встроенные виджеты внутри текста. Это можно использовать для поворота смайлов внутри текста.

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

Простое использование RotatedBox

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

Если вы создаете собственный шрифт со всеми символами, повернутыми на 180 ° (жесткая часть), вы можете просто изменить textDirection на TextDirection.rtl (справа налево) и повернуть текст на четверть (тоже непросто).

В итоге я создал собственный виджет для обработки текста.

• Пакет находится здесь: https://pub.dev/packages/mongol
• Я описал, как я сделал пакет здесь: https://www.raywenderlich.com/4562681-flutter-text-rendering

Это была нетривиальная задача, но она гибкая. Другие посетители этого вопроса могут следовать аналогичной схеме, если другие ответы не соответствуют вашим потребностям.

Если вы хотите больше контролировать рендеринг текста во Flutter, прочтите Мой первый Разочарование Flutter и добавьте комментарий к этой проблеме GitHub.

Просто нарисуйте то, что вы хотите

Примеры flutter-widget-positioning-guide

тогда

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