How to break a Text / String into multiple lines in Flutter
Key takeaways:
The
Textwidget in Flutter provides parameters likestyle,textAlign, andtextDirectionto format text appearance and alignment for a polished UI.Use the
maxLinesproperty to define the maximum number of lines displayed. Overflowing text can be truncated with an ellipsis (…) for better readability.Set
softWrap: trueto enable automatic line wrapping when text exceeds the container width, ensuring content adapts seamlessly to varying screen sizes.Insert
\ndirectly in the text to manually define line breaks, offering precise control over text layout in custom scenarios.Utilize properties like
semanticsLabelfor screen readers andselectionColorfor text selection, ensuring inclusive and accessible application design.
When building a Flutter app, we may often need to display a long text or string that doesn’t fit on a single line. In such cases, it is essential to break the text into multiple lines to ensure it fits within the available space. Flutter provides various methods to achieve this. Before diving into the various methods, let’s first explore the Text widget constructor and its parameters.
Constructor and parameters
The Text widget provides a constructor with various parameters to customize its behavior and layout.
const Text(
String data,{
Key? key,
TextStyle? style,
StrutStyle? strutStyle,
TextAlign? textAlign,
TextDirection? textDirection,
Locale? locale,
bool? softWrap,
TextOverflow? overflow,
double? textScaleFactor,
int? maxLines,
String? semanticsLabel,
TextWidthBasis? textWidthBasis,
TextHeightBehavior? textHeightBehavior,
Color? selectionColor
})
Let’s take a closer look at each parameter and its purpose:
data: The actual text or string to be displayed.key: An optional key to uniquely identify the widget.style: The text style to apply to the displayed text.strutStyle: The strut style used to set the minimum height for the line boxes.textAlign: The horizontal alignment of the text within its container.textDirection: The direction of the text (e.g., left-to-right or right-to-left).locale: The locale used to select region-specific text formatting rules.softWrap: Whether the text should wrap to the next line if it overflows its container.overflow: How to handle text overflow (e.g., ellipsis, clip, or fade).textScaleFactor: The factor by which to scale the text size.maxLines: The maximum number of lines to display before truncating the text.semanticsLabel: A description used by screen readers for accessibility.textWidthBasis: The basis for calculating the width of the text (e.g., the parent or longest line).textHeightBehavior: Configurations for adjusting the line height and baseline.selectionColor: The background color of the selected text.
In this Answer, we'll explore some of the common ways to break a text into multiple lines.
Method 1: Using the maxLines property
The maxLines property allows us to specify the maximum number of lines 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 is continued.
After running the above code, we will be able to see the following output:
Method 2: Using the softWrap property
The simplest way to break a text into multiple lines is by using the Text widget and enabling the softWrap property. When the softWrap is set to true, the text will wrap to the next line if it exceeds the width of its container.
Output
After running the above code, we will be able to see the following output:
Method 3: Using explicit line breaks (\n):
We can manually insert line breaks (\n) in your text to indicate where the text should break into a new line.
After running the above code, we will be able to see the following output:
Code example
We have put together the code in the following, let’s see what we get in the output:
We will get the following output:
Conclusion
Flutter provides multiple ways to break text into multiple lines. We can use the maxLines property to limit lines with an ellipsis, enable softWrap for automatic wrapping, or manually insert line breaks (\n) for precise control. We can choose the method that best suits our layout and design requirements.
Further learning
Discover how to use third-party packages from pub.dev to add extra functionality like image loading, local storage, or device-specific features.
Learn about creating custom widgets from scratch, focusing on reusability, styling, and adapting to different themes.
Explore methods like using SharedPreferences, Hive, or SQLite to store data locally within Flutter apps.
Understand how to write unit tests, widget tests, and integration tests to ensure app reliability and catch potential bugs early.
Free Resources