Wrapping text inside a circle (Flutter)

Question

is it possible to wrap text inside a circle in Flutter? Here is a failed example. Ideally the text would fit inside the circle and overflow at the end only.

ClipOval(
  child: SizedBox.expand(
    child: Text(
      "Round and round the rugged rocks, the rascally rascals ran. Round and round the rugged rocks, the rascally rascals ran. Round and round the rugged rocks, the rascally rascals ran. Round and round the rugged rocks, the rascally rascals ran. ",
      softWrap: true,
      overflow: TextOverflow.fade,
    ),
  ),
),

Answer 1

As of now (July 2019), Flutter does not directly support laying out text in non-rectangular shapes.

Using existing API, it should be possible to achieve a similar custom effect by implementing something that performs the following steps:

• Create a column.
• Layout single line text with width of circle at line 1
• Get the character index of the last laid out character (using getBoxesForRange and getPositionForOffset)
• Truncate the front of the text you want to layout at the index to obtain remaining text.
• Layout the remaining text as a single line text with width of circle at line 2. The y position at line 2 can be obtained by adding the height of the single line 1.
• Repeat until no more text or circle is filled. Place all text within the column centered.

That should be able to get you something close. The implementation will have to handle all of the calculations of the widths of the circle at each y-position as well as manually position each line of text.