This blog post will guide you through different ways to achieve wrap text in multiple lines in Flutter with various examples.
By the end, you’ll clearly understand how to manage text wrapping effectively in your Flutter projects.
When developing a Flutter application, handling text that needs to wrap across multiple lines is a common requirement.
Table of Contents
Introduction to Text Wrapping – Flutter wrap text in multiple lines
In Flutter, the Text widget is used to display text in the app. By default, Text will attempt to fit its content into a single line.
However, you often need the text to wrap onto multiple lines, especially when dealing with longer strings or limited screen space.
Basic Text Wrapping – Flutter wrap text in multiple lines
The simplest way to enable text wrapping is to use the Text widget with its softWrap property set to true. By default, softWrap is already true, so you usually don’t need to change this property.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Text Wrapping Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'This is a very long text that will wrap onto multiple lines. '
'Flutter makes it easy to manage text wrapping without much effort.',
style: TextStyle(fontSize: 18),
),
),
),
);
}
}
In this example, the text will automatically wrap onto multiple lines within the Padding widget.
Controlling Maximum Lines – Flutter wrap text in multiple lines
Sometimes, you might want to limit the number of lines the text can span. This can be achieved using the maxLines property.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Text Wrapping Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'This is a very long text that will wrap onto multiple lines. '
'Flutter makes it easy to manage text wrapping without much effort.',
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 18),
),
),
),
);
}
}
In this example, the text will wrap onto a maximum of 3 lines. If the text exceeds this limit, it will be truncated with an ellipsis.
Using RichText for Advanced Formatting
For more advanced text formatting, you can use the RichText widget, which allows you to style different parts of the text independently.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('RichText Wrapping Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: RichText(
text: TextSpan(
children: [
TextSpan(
text: 'This is a very long text ',
style: TextStyle(fontSize: 18, color: Colors.black),
),
TextSpan(
text: 'that will wrap onto multiple lines. ',
style: TextStyle(fontSize: 18, color: Colors.blue),
),
TextSpan(
text: 'Flutter makes it easy to manage text wrapping ',
style: TextStyle(fontSize: 18, fontStyle: FontStyle.italic, color: Colors.green),
),
TextSpan(
text: 'without much effort.',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.red),
),
],
),
),
),
),
);
}
}
Wrapping Text in a Column or Row
When placing text within a Column or Row, you need to be mindful of the layout constraints. For Column, text wrapping works seamlessly. For Row, you might need to use Expanded or Flexible to ensure proper wrapping.
Row Example with Expanded
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Row Wrapping Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: [
Expanded(
child: Text(
'This is a very long text that will wrap onto multiple lines. '
'Flutter makes it easy to manage text wrapping without much effort.',
style: TextStyle(fontSize: 18),
),
),
],
),
),
),
);
}
}
Output
Also read:
Conclusion
Handling text wrapping in Flutter is straightforward thanks to the flexibility of the Text widget and the layout system. By understanding and utilizing properties like softWrap, maxLines, and using widgets like RichText, Column, and Row, you can manage text display effectively in your app.
You can visit for more widgets: official doc
