Wrapping text inside a circle in Flutter

Posted by Andre Scott | Updated on

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.

If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.

Related Questions & Answers