Overview
Text is a basic widget that displays styled text.
The Text widget displays text with a single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints. You can customize the appearance of text using the style property. If you need to use multiple styles, you can use the Text.rich constructor or use the RichText widget directly.
When to use it?
- When displaying text on the screen
- When showing titles, body text, labels, etc.
- When single-styled text is needed
- When text overflow handling is required
- When text alignment is needed
Basic Usage
// Basic text
Text('Hello, Flitter!')
// Styled text
Text('Styled text', {
style: TextStyle({
fontSize: 24,
fontWeight: 'bold',
color: 'blue'
})
})
// Multi-styled text (Text.rich)
Text.rich(
TextSpan({
text: 'Hello ',
children: [
TextSpan({
text: 'Flitter',
style: TextStyle({ color: 'blue', fontWeight: 'bold' })
}),
TextSpan({ text: '!' })
]
})
)
Constructors
Text(data, props?)
The default constructor creates single-styled text.
Text('Basic text')
Text('Styled text', { style: TextStyle({ fontSize: 18 }) })
Text.rich(textSpan, props?)
Creates text with multiple styles.
Text.rich(
TextSpan({
text: 'Base text ',
style: TextStyle({ fontSize: 16 }),
children: [
TextSpan({
text: 'emphasized text',
style: TextStyle({ fontWeight: 'bold', color: 'red' })
})
]
})
)
Props
style
Value: TextStyle | undefined
Defines the text style. If null, the default text style is used.
Text('Styled text', {
style: TextStyle({
fontSize: 20,
fontWeight: 'bold',
color: '#333333'
})
})
textAlign
Value: TextAlign | undefined
Defines the horizontal alignment of text.
Available values:
TextAlign.left: Left alignedTextAlign.right: Right alignedTextAlign.center: Center alignedTextAlign.justify: JustifiedTextAlign.start: Start direction aligned (left in LTR)TextAlign.end: End direction aligned (right in LTR)
Text('Center aligned text', {
textAlign: TextAlign.center
})
overflow
Value: TextOverflow | undefined
How to handle text overflow when it exceeds the space.
Available values:
TextOverflow.clip: Clip the text (default)TextOverflow.fade: Fade outTextOverflow.ellipsis: Show ellipsis (…)TextOverflow.visible: Allow overflow
Text('Very long text that will be displayed here...', {
overflow: TextOverflow.ellipsis
})
softWrap
Value: boolean | undefined (default: true)
Whether the text should break at soft line breaks.
Text('Long text will automatically wrap to the next line', {
softWrap: true // Allow wrapping
})
Text('This text will only be displayed on one line', {
softWrap: false // No wrapping
})
textDirection
Value: TextDirection | undefined
The directionality of the text.
Available values:
TextDirection.ltr: Left to rightTextDirection.rtl: Right to left
Text('مرحبا بالعالم', {
textDirection: TextDirection.rtl
})
textWidthBasis
Value: TextWidthBasis | undefined
Defines how to measure the width of the rendered text.
Available values:
TextWidthBasis.parent: Width of parent (default)TextWidthBasis.longestLine: Width of longest line
Text('Multi-line\ntext', {
textWidthBasis: TextWidthBasis.longestLine
})
TextStyle Properties
TextStyle defines the visual properties of text.
color
Value: string | undefined
The text color.
TextStyle({ color: 'blue' })
TextStyle({ color: '#FF5733' })
TextStyle({ color: 'rgba(255, 0, 0, 0.5)' })
fontSize
Value: number | undefined
The font size in pixels.
TextStyle({ fontSize: 16 }) // 16px
TextStyle({ fontSize: 24 }) // 24px
fontWeight
Value: string | undefined
The font weight.
Available values:
'normal'or'400''bold'or'700''100'to'900'(in increments of 100)
TextStyle({ fontWeight: 'bold' })
TextStyle({ fontWeight: '600' })
fontStyle
Value: FontStyle | undefined
The font style.
Available values:
FontStyle.normal: NormalFontStyle.italic: Italic
TextStyle({ fontStyle: FontStyle.italic })
fontFamily
Value: string | undefined
The font family to use.
TextStyle({ fontFamily: 'Roboto' })
TextStyle({ fontFamily: 'Arial, sans-serif' })
height
Value: number | undefined
The line height as a multiple of the font size.
TextStyle({
fontSize: 16,
height: 1.5 // Line height is 24px (16 * 1.5)
})
inherit
Value: boolean (default: true)
Whether to inherit the parent’s text style.
TextStyle({
inherit: false, // Ignore parent style
fontSize: 20
})
Practical Examples
Example 1: Title and Body
const ArticleHeader = () => {
return Column({
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('From Flutter to Flitter', {
style: TextStyle({
fontSize: 28,
fontWeight: 'bold',
color: '#1a1a1a'
})
}),
SizedBox({ height: 8 }),
Text('A new way to build Flutter apps with JavaScript', {
style: TextStyle({
fontSize: 16,
color: '#666666',
height: 1.5
})
}),
SizedBox({ height: 4 }),
Text('January 10, 2024 • 5 min read', {
style: TextStyle({
fontSize: 14,
color: '#999999'
})
})
]
});
};
Example 2: Card with Ellipsis
const ProductCard = ({ title, description, price }) => {
return Container({
padding: EdgeInsets.all(16),
decoration: BoxDecoration({
color: 'white',
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow({
color: 'rgba(0, 0, 0, 0.1)',
blurRadius: 4,
offset: { x: 0, y: 2 }
})
]
}),
child: Column({
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(title, {
style: TextStyle({
fontSize: 18,
fontWeight: 'bold'
}),
overflow: TextOverflow.ellipsis
}),
SizedBox({ height: 8 }),
Text(description, {
style: TextStyle({
fontSize: 14,
color: '#666666',
height: 1.4
}),
overflow: TextOverflow.ellipsis,
softWrap: true
}),
SizedBox({ height: 12 }),
Text(`$${price.toFixed(2)}`, {
style: TextStyle({
fontSize: 20,
fontWeight: 'bold',
color: '#FF5733'
})
})
]
})
});
};
Example 3: Mixed Style Text
const TermsText = () => {
return Text.rich(
TextSpan({
text: 'By continuing, you agree to our ',
style: TextStyle({ fontSize: 14, color: '#666' }),
children: [
TextSpan({
text: 'Terms of Service',
style: TextStyle({
color: 'blue',
fontWeight: 'bold'
})
}),
TextSpan({ text: ' and ' }),
TextSpan({
text: 'Privacy Policy',
style: TextStyle({
color: 'blue',
fontWeight: 'bold'
})
}),
TextSpan({ text: '.' })
]
})
);
};
Example 4: Chat Message
const ChatMessage = ({ message, isMe, time }) => {
return Container({
margin: EdgeInsets.symmetric({ horizontal: 16, vertical: 4 }),
alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
child: Container({
padding: EdgeInsets.symmetric({ horizontal: 12, vertical: 8 }),
decoration: BoxDecoration({
color: isMe ? '#007AFF' : '#E5E5EA',
borderRadius: BorderRadius.circular(18)
}),
constraints: Constraints({ maxWidth: 250 }),
child: Column({
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(message, {
style: TextStyle({
fontSize: 16,
color: isMe ? 'white' : 'black'
})
}),
SizedBox({ height: 2 }),
Text(time, {
style: TextStyle({
fontSize: 12,
color: isMe ? 'rgba(255, 255, 255, 0.7)' : '#999999'
})
})
]
})
})
});
};
Example 5: Price Display
const PriceDisplay = ({ originalPrice, salePrice, discountRate }) => {
return Row({
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
if (originalPrice !== salePrice) ...[
Text(`$${originalPrice.toFixed(2)}`, {
style: TextStyle({
fontSize: 14,
color: '#999999',
decoration: 'line-through'
})
}),
SizedBox({ width: 8 })
],
Text(`$${salePrice.toFixed(2)}`, {
style: TextStyle({
fontSize: 24,
fontWeight: 'bold',
color: '#1a1a1a'
})
}),
if (discountRate > 0) ...[
SizedBox({ width: 8 }),
Text(`${discountRate}% OFF`, {
style: TextStyle({
fontSize: 18,
fontWeight: 'bold',
color: '#FF5733'
})
})
]
]
});
};
Important Notes
- The overflow property is most effective when softWrap is false or text is limited to one line.
- When using fontFamily, ensure the font is installed on the system or included in the app.
- The height property adjusts line spacing and works as a multiple of fontSize.
- When using Text.rich, the base style is inherited by all TextSpans (when inherit is true).
Related Widgets
- RichText: For more complex text styling needs
- TextField: For user input
- SelectableText: When selectable text is needed
- DefaultTextStyle: To define default text style for a subtree