1

tl;dr

How to split a string after it reaches the maxmimum height in its Text widget?

My problem

I'm new to Flutter, that's why it is possible that I did not see low hangig fruits.

What I want is, that a string of various length are splitted into an n-amount of styled Text widgets.

All in all it should look like a multi-column layout but also on dual screen devices (2 on the left side, 2 on the right side).

That's why I tought, the best idea is to split the text into a list of Text widgets that are constraint / limited by their maximum height.

Question

How to calculate the length of the text which fits into a column, that I can split it up?

After that I think I know what I've to do

I think after I know how to split the text everything else is straight forward.

What I googled

Sketch

App idea

Sketche

Tobonaut
  • 2,245
  • 2
  • 26
  • 39
  • Have not personally checked but [this suggestion](http://stackoverflow.com/questions/52659759/ddg#56997641) might give you a hint. – D J May 25 '21 at 12:47

2 Answers2

1

Didn't find a fully satisfactory solution yet, but this might be a workaround:

  • Split your text on '\n'
  • Map each line to a Widget
  • Surround these widgets by a Wrap() widget
Wrap(
  direction: Axis.vertical,
  children: text.split("\n").map(
    (line) => Text(line),
  ).toList(),
)
cassioso
  • 966
  • 1
  • 13
  • 27
0

To split the text into a Multi-Line Column, you should simply wrap the Text widget inside an Expanded widget. Expanded widget will automatically change the line of the Text when it is at the end of the Column.

Aloysius Samuel
  • 1,004
  • 6
  • 11
  • 1
    Do you meant "Muli-Column"? Multi-Line seems to be working out of the Box. The Problem is that I have to have different Text widgets because of other circumstances. – Tobonaut Apr 13 '21 at 13:47