Flutter: RichText / TextSpan: new line on overflow

Question

Suppose I have a the following text

RichText(
    maxLines: 10,
    softWrap: true,
    text: TextSpan(
        children: [
            TextSpan(
                text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar nisi ullamcorper bibendum tempor. Nam a leo commodo lorem pellentesque condimentum. In odio diam, porttitor ac porttitor at, iaculis elementum ipsum. Integer quis nibh et nulla gravida iaculis in eget elit. Integer mattis pretium bibendum. Pellentesque bibendum scelerisque erat. Phasellus vitae sapien diam. Quisque aliquet iaculis elit sit amet luctus. Donec tortor nisl, pulvinar ultrices mi in, ullamcorper luctus odio. Integer viverra magna quis tortor malesuada, vitae porta purus efficitur. Curabitur mollis cursus eros eget posuere.',
                style: TextStyle(
                    color: Colors.white,
                    backgroundColor: Colors.teal,
                    fontSize: 20,
                ),
            ),
        ]),
    )

This renders the following

This long text overflows the screen. What I'd like to have is that the text continues on a new line if the space is running out. How can I achieve this? Setting new lines in the 'text' property is not an option (think of different screen sizes or different languages etc)

Answer 1

Wrap the RichText within Expanded/Flexible.

NOTE: Remember that Flexible and Expanded, should only be used within a Column, Row or Flex.

Container(
  child: Row(
    children: [
      Flexible(
        child: RichText(
          maxLines: 10,
          softWrap: true,
          text: TextSpan(
            children: [
              TextSpan(
                text:
                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar nisi ullamcorper bibendum tempor. Nam a leo commodo lorem pellentesque condimentum. In odio diam, porttitor ac porttitor at, iaculis elementum ipsum. Integer quis nibh et nulla gravida iaculis in eget elit. Integer mattis pretium bibendum. Pellentesque bibendum scelerisque erat. Phasellus vitae sapien diam. Quisque aliquet iaculis elit sit amet luctus. Donec tortor nisl, pulvinar ultrices mi in, ullamcorper luctus odio. Integer viverra magna quis tortor malesuada, vitae porta purus efficitur. Curabitur mollis cursus eros eget posuere.',
                style: TextStyle(
                  color: Colors.white,
                  backgroundColor: Colors.teal,
                  fontSize: 20,
                ),
              ),
            ],
          ),
        ),
      )
    ],
  ),
);

Answer 2

Here you go: Use \n between your Text, to Break it apart.

\n breaks the line and makes the further next text jump to next line.

example:

Lorem ipsum dolor sit amet, \n consectetur adipiscing elit. \n Nulla pulvinar nisi ullamcorper bibendum tempor.

will be Compiled as:

Lorem ipsum dolor sit amet, 
consectetur adipiscing elit.
Nulla pulvinar nisi ullamcorper bibendum tempor.

Answer 3

Use Expanded widget

Expanded(
    child: RichText(
  maxLines: 10,
  softWrap: true,
  text: TextSpan(children: [
    TextSpan(
      text:
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar nisi ullamcorper bibendum tempor. Nam a leo commodo lorem pellentesque condimentum. In odio diam, porttitor ac porttitor at, iaculis elementum ipsum. Integer quis nibh et nulla gravida iaculis in eget elit. Integer mattis pretium bibendum. Pellentesque bibendum scelerisque erat. Phasellus vitae sapien diam. Quisque aliquet iaculis elit sit amet luctus. Donec tortor nisl, pulvinar ultrices mi in, ullamcorper luctus odio. Integer viverra magna quis tortor malesuada, vitae porta purus efficitur. Curabitur mollis cursus eros eget posuere.',
      style: TextStyle(
        color: Colors.white,
        backgroundColor: Colors.teal,
        fontSize: 20,
      ),
    ),
  ]),
));

It's worked for me