Line Breaks in Long Text Flutter

Question

How can I create line breaks within a long Text widget?

For example, I am creating a biographical page about myself. And I have three paragraphs I want to be able to dis

Answer 1

I came here wanting to divide a long string in code over multiple lines. Starting with this:

final longString = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';

Multi-line without new lines

You can make it all visible in your code editor by doing this:

final longString = 'Lorem ipsum dolor sit amet, consectetur adipiscing '
    'elit, sed do eiusmod tempor incididunt ut labore et dolore magna '
    'aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco '
    'laboris nisi ut aliquip ex ea commodo consequat. ';

or this:

final longString = 'Lorem ipsum dolor sit amet, consectetur adipiscing ' +
    'elit, sed do eiusmod tempor incididunt ut labore et dolore magna ' +
    'aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ' +
    'laboris nisi ut aliquip ex ea commodo consequat.';

without affecting the content of the string. That is, no newline characters will be added.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Multi-line with new lines

If you actually do want the line breaks to stay, then you can use triple quotes.

final longString = '''
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, 
sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. 

Ut enim ad minim veniam, 
quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea 
commodo consequat.
''';

which produces:

Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.

Ut enim ad minim veniam,
quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat.

Dividing paragraphs

As has already been mentioned, just add two \n newline characters to every paragraph to separate them. Or a \t tab at the beginning and a newline at the end.

final paragraph1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
final paragraph2 = 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';
final text = paragraph1 + '\n\n' + paragraph2;

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

If you are doing a lot of string concatenation, then consider using StringBuffer.

See also

• Meaning of Paragraph in Flutter classes

Answer 2

declare your text like so:

final String someText = 
"stuff for the 1st paragraph\n\n"
"stuff for the 2nd paragraph\n\n"
"stuff for the 3rd paragraph\n\n";

and then you can just render it inside of a Text widget like you normally would.

Answer 3

I'm assuming you already have some way in the original text to tell that there should be a line break such as \n. If your paragraph is something like: var text = "paragraph1\n\nparagraph2";, you could do something like the following:

var split = text.split('\n').map((i) {
  if (i == "") {
    return Divider();
  } else {
    return Text(i);
  }
}).toList();
var displayElement = Column(children: split);

returning the displayElement, which will have a divider element between each paragraph.