Flutter Text Widget
The Flutter Text widget is one of the most fundamental and frequently used widgets in Flutter development. When building Flutter applications, the Text widget serves as the primary component for displaying textual content on the screen. Whether you’re creating simple labels, paragraphs, or complex formatted text, the Flutter Text widget provides extensive customization options to meet your design requirements. Understanding how to effectively use the Text widget is crucial for any Flutter developer looking to create engaging user interfaces.
Understanding the Flutter Text Widget
The Flutter Text widget is a stateless widget that displays a string of text with a single style. This widget is part of Flutter’s core widget library and doesn’t require any additional dependencies. The Text widget renders text using the specified style properties and handles text layout automatically based on the available space and constraints.
Text('Hello, Flutter!')
The basic Text widget constructor accepts a string as its primary parameter. This string represents the text content that will be displayed on the screen. The Flutter Text widget automatically handles text rendering, including font loading, character spacing, and line breaks when necessary.
Essential Properties of Flutter Text Widget
data Property
The data property is the primary parameter of the Flutter Text widget. It accepts a String value that represents the text content to be displayed. This property is required and defines what text users will see on the screen.
Text(
'This is the text content',
)
style Property
The style property allows you to customize the appearance of your Flutter Text widget. It accepts a TextStyle object that defines various visual properties like font size, color, weight, and family. This property gives you complete control over how your text appears.
Text(
'Styled Text',
style: TextStyle(
fontSize: 18,
color: Colors.blue,
fontWeight: FontWeight.bold,
),
)
The TextStyle class provides numerous properties for text customization. You can modify font size using the fontSize property, change text color with the color property, and adjust font weight using fontWeight. These style properties make your Flutter Text widget visually appealing and consistent with your app’s design.
textAlign Property
The textAlign property controls how text is aligned within the Flutter Text widget’s container. This property accepts TextAlign enum values such as TextAlign.left, TextAlign.center, TextAlign.right, and TextAlign.justify.
Text(
'Center aligned text',
textAlign: TextAlign.center,
)
maxLines Property
The maxLines property restricts the number of lines the Flutter Text widget can occupy. When text exceeds the specified number of lines, it gets truncated based on the overflow property. This property is particularly useful for creating consistent layouts.
Text(
'This is a very long text that might span multiple lines',
maxLines: 2,
)
overflow Property
The overflow property determines how the Flutter Text widget handles text that exceeds its container boundaries. Common values include TextOverflow.ellipsis (adds “…” at the end), TextOverflow.fade (fades out the text), and TextOverflow.clip (cuts off the text).
Text(
'This text will show ellipsis when it overflows',
maxLines: 1,
overflow: TextOverflow.ellipsis,
)
softWrap Property
The softWrap property controls whether the Flutter Text widget should break text at soft line breaks. When set to true (default), text wraps to the next line when it reaches the container boundary. Setting it to false prevents automatic line breaks.
Text(
'This text will wrap to the next line automatically',
softWrap: true,
)
textDirection Property
The textDirection property specifies the direction in which text should be rendered in the Flutter Text widget. This property accepts TextDirection.ltr (left-to-right) or TextDirection.rtl (right-to-left) values, making it essential for internationalization.
Text(
'Right to left text',
textDirection: TextDirection.rtl,
)
Advanced Styling with TextStyle
The TextStyle class provides extensive customization options for your Flutter Text widget. Beyond basic properties like fontSize and color, you can control letter spacing, word spacing, text decoration, and more.
Font Family and Weight
You can specify custom fonts for your Flutter Text widget using the fontFamily property. The fontWeight property allows you to control text thickness, ranging from FontWeight.w100 (thin) to FontWeight.w900 (black).
Text(
'Custom Font Text',
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.w600,
),
)
Text Decoration
The decoration property adds visual enhancements to your Flutter Text widget text. You can add underlines, overlines, or strike-through effects using TextDecoration values.
Text(
'Decorated Text',
style: TextStyle(
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.wavy,
),
)
Letter and Word Spacing
Fine-tune the spacing in your Flutter Text widget using letterSpacing and wordSpacing properties. These properties accept double values to increase or decrease spacing between characters and words.
Text(
'Spaced Text',
style: TextStyle(
letterSpacing: 2.0,
wordSpacing: 4.0,
),
)
Working with Rich Text
While the basic Flutter Text widget handles single-style text, you might need to display text with multiple styles within the same widget. For such scenarios, Flutter provides the RichText widget, which works alongside TextSpan objects.
RichText(
text: TextSpan(
children: [
TextSpan(
text: 'Hello ',
style: TextStyle(color: Colors.blue),
),
TextSpan(
text: 'World!',
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
),
),
],
),
)
Complete Flutter Text Widget Example
Here’s a comprehensive example demonstrating various Flutter Text widget properties and styling options. This example showcases how to implement different text styles, alignments, and decorations in a real Flutter application.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Text Widget Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TextWidgetDemo(),
);
}
}
class TextWidgetDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Text Widget Examples'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Basic Text Widget
Text(
'Basic Flutter Text Widget',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
),
SizedBox(height: 16),
// Styled Text Widget
Text(
'This is a styled Flutter Text widget with custom font size, color, and weight.',
style: TextStyle(
fontSize: 16,
color: Colors.blue,
fontWeight: FontWeight.w500,
letterSpacing: 1.2,
),
),
SizedBox(height: 16),
// Center Aligned Text
Container(
width: double.infinity,
child: Text(
'Center Aligned Text Widget',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
color: Colors.green,
fontStyle: FontStyle.italic,
),
),
),
SizedBox(height: 16),
// Text with Decoration
Text(
'Decorated Flutter Text Widget',
style: TextStyle(
fontSize: 16,
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.wavy,
decorationThickness: 2.0,
),
),
SizedBox(height: 16),
// Text with Max Lines and Overflow
Text(
'This is a very long Flutter Text widget that demonstrates the maxLines and overflow properties. The text will be truncated with ellipsis when it exceeds the specified number of lines.',
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 14,
color: Colors.purple,
),
),
SizedBox(height: 16),
// Text with Custom Spacing
Text(
'Custom Letter and Word Spacing',
style: TextStyle(
fontSize: 16,
letterSpacing: 3.0,
wordSpacing: 8.0,
color: Colors.orange,
),
),
SizedBox(height: 16),
// Rich Text Example
RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: [
TextSpan(
text: 'This is ',
style: TextStyle(fontSize: 16),
),
TextSpan(
text: 'rich text ',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
TextSpan(
text: 'with multiple styles!',
style: TextStyle(
fontSize: 16,
fontStyle: FontStyle.italic,
color: Colors.blue,
),
),
],
),
),
],
),
),
);
}
}
This comprehensive example demonstrates the versatility of the Flutter Text widget. The code includes imports for the Flutter material library, creates a complete app structure with MaterialApp and Scaffold, and showcases various Text widget properties in action. You can copy this code into your Flutter project and run it to see how different Text widget configurations affect the visual appearance of text in your application.