In Flutter, the Text widget is used to display a short piece of text. It is a lightweight widget that allows you to display a small amount of rich text or a simple string.
The text widget is the most used element in Flutter. Basically, it is used almost everywhere. It is used in buttons, menus, descriptions, credits, titles, etc. Most of the time, we don’t even think about it until we have a problem because the text is too long or we need to split it into multiple lines.
How to break a Text in Flutter
There are several ways to break a Text widget into multiple lines in Flutter:
1. Use the maxLines property
Text(
'This is a very long text that needs to be wrapped into multiple lines',
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 34),
)The maxLines property allows you to specify the maximum number of lines that the Text widget should occupy. If the text exceeds this number of lines, it will be truncated and an ellipsis (…) will be displayed at the end to indicate that the text has been truncated.
2. Use the softWrap property
Text(
'This is a very long text that needs to be wrapped into multiple lines',
softWrap: true,
style: TextStyle(fontSize: 34),
)The softWrap property allows the Text widget to wrap the text onto multiple lines if it exceeds the width of the container.
3. Use the Text.rich constructor
Text.rich(
TextSpan(
text: 'This is a very long text that needs to be wrapped into multiple lines',
style: TextStyle(fontSize: 34),
),
)Text.rich(
TextSpan(
children: [
TextSpan(text: 'This is the first line\n', style: TextStyle(fontSize: 24),),
TextSpan(text: 'This is the second line', style: TextStyle(fontSize: 34),),
],
),
)The Text.rich constructor allows you to create a Text widget with multiple spans of styled text. Each span can be styled independently and can be configured to wrap onto multiple lines.
How to use \n to break text into multiple lines in Flutter
To use the \n character in Flutter, you can include it in a string of text. The \n character represents a line break, so when the string is displayed, it will be displayed with a line break at the point where the \n character appears. Simply use \n in the place where the break needs to be.
\n is an escape character for a string that is replaced with the new line object. Writing \n in a string that prints out will print out a new line instead of the \n.
Text(
'This is the first line\nThis is the second line',
)If you want to add a ‘break line’ you can use two \n\n as in the example below.
You can read more about the Text widget in this post: Flutter Basics – What is and how to use Text widget in Flutter
Text(
"flutterassets.com\n\nProgramming isn't about what you know;\nIt's about what you can figure out.\n\n - Chris Pine",
),
Note that the \n character must be included within a string of text. It cannot be used outside of a string, for example:
Text(
'This is the first line' + \n + 'This is the second line', // This will not work
)Break line inside the code editor
If you have a long string and you want to break it in the editor you can use quotation marks as in the example below.
Text(
"flutterassets.com"
"\n\nProgramming isn't about what you know;"
"\nIt's about what you can figure out."
"\n\n - Chris Pine",
),
As you can see, I used a double quotation (” “) to wrap the String, but you can use a single quotation (‘ ‘) too.
There is a reason why I used a double quotation. The String itself contains words like “ isn’t ” and “ it’s ” which use a single quotation that could end the string and cause an error.
If you need to use a single quotation for your string and you have “ isn’t ” and “ it’s ” or a similar word with a special character in your text, use ” \ ” before the special character ” ‘ ” for example “ isn\’t ” or “ it\’s ”. This way, the special character will be treated as a normal letter.
I hope this simple example helped someone 🙂
