How to break a Text / String into multiple lines in Flutter

Key takeaways:
The Text widget in Flutter provides parameters like style, textAlign, and textDirection to format text appearance and alignment for a polished UI.
Use the maxLines property to define the maximum number of lines displayed. Overflowing text can be truncated with an ellipsis (…) for better readability.
Set softWrap: true to enable automatic line wrapping when text exceeds the container width, ensuring content adapts seamlessly to varying screen sizes.
Insert \n directly in the text to manually define line breaks, offering precise control over text layout in custom scenarios.
Utilize properties like semanticsLabel for screen readers and selectionColor for 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.

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MaterialApp( home: MyHomePage(),));  
}  
  
class MyHomePage extends StatefulWidget {  
  @override  
  _HomePageState createState() => _HomePageState();  
}  
  
class _HomePageState extends State<MyHomePage> {   
  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: Scaffold(  
        appBar: AppBar(title: Text('Educative Answers'),),  
        body: Text(
          'Welcome to Educative.io, Hope you are having great time with answers',
          maxLines: 3,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(fontSize: 34),
        ) 
      ),  
    );  
  }  
}

Implementation of the maxLine property

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MaterialApp( home: MyHomePage(),));  
}  
  
class MyHomePage extends StatefulWidget {  
  @override  
  _HomePageState createState() => _HomePageState();  
}  
  
class _HomePageState extends State<MyHomePage> {   
  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: Scaffold(  
        appBar: AppBar(title: Text('Educative Answers'),),  
        body: Text(
          'Welcome to Educative.io! We hope you are enjoying your time exploring answers and learning with us.',
           style: TextStyle(fontSize: 34),
           softWrap: true,
        ), 
      ),  
    );  
  }  
}

Implementation of the softwrap property

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MaterialApp( home: MyHomePage(),));  
}  
  
class MyHomePage extends StatefulWidget {  
  @override  
  _HomePageState createState() => _HomePageState();  
}  
  
class _HomePageState extends State<MyHomePage> {   
  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: Scaffold(  
        appBar: AppBar(title: Text('Educative Answers'),),  
        body: Text(
          'Welcome to Educative.io! We hope you are enjoying your time exploring answers and learning with us.',
          style: TextStyle(fontSize: 34),
        ), 
      ),  
    );  
  }  
}

Break the lines

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MaterialApp( home: MyHomePage(),));  
}  
  
class MyHomePage extends StatefulWidget {  
  @override  
  _HomePageState createState() => _HomePageState();  
}  
  
class _HomePageState extends State<MyHomePage> {   
  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: Scaffold(  
        appBar: AppBar(title: Text('Educative Answers'),),  
        body: Text(
          'Welcome to Educative.io! We hope you are enjoying your time exploring answers and learning with us.',
          maxLines: 3,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(fontSize: 34),
        ), 
      ),  
    );  
  }  
}

Complete implementation

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.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

How to make text multiple lines in Flutter

To make text display on multiple lines in Flutter, you can use the following methods:

Using the softWrap property: Set softWrap: true in the Text widget to allow automatic line wrapping when the text exceeds the container’s width.
Using the maxLines property: Set maxLines to a specific number to limit the number of lines. If the text exceeds this limit, it will be truncated with an ellipsis (…).
Inserting explicit line breaks (\n): Manually add \n within the text string to indicate where the text should break into a new line.
Using layout constraints: Wrap the Text widget in a ConstrainedBox or a SizedBox to restrict its width, causing the text to wrap automatically.

How can you make text scrollable in Flutter?

To make text scrollable in Flutter, you can wrap the Text widget inside a SingleChildScrollView. This allows the text to be scrollable when it exceeds the screen’s available space. You can adjust the scroll direction (vertical or horizontal) using the scrollDirection property. For more complex layouts that include text and other widgets, using a ListView is recommended, as it provides built-in scrolling capabilities. Adding padding or margins around the scrollable area can improve readability and layout design.

How do you set the alignment of text within its container?

To set the alignment of text within its container in Flutter, you can use the following approaches:

Use the textAlign property in the Text widget: This property aligns text horizontally within the available space. Options include TextAlign.left, TextAlign.center, TextAlign.right, and TextAlign.justify.
Wrap the Text widget in an Align widget: This allows for both horizontal and vertical alignment using the alignment property, which can be set to values like Alignment.center, Alignment.topLeft, etc.
Use a Container with the alignment property: Wrapping the text in a Container with the alignment property lets you control both horizontal and vertical alignment of the text inside the container.
Utilize Center widget: If you want to center the text within its container, wrapping the Text widget with a Center widget is a straightforward approach.