Flutter Text
Displaying and styling text in Flutter applications
📝 What is Text Widget?
The Text widget displays a string of text with single style in your Flutter app. It's the most basic and essential widget for showing readable content to users.
// Simple Text widget example
Text('Hello, Flutter!')
Output:
Hello, Flutter!
Text Widget Features
Styling
Customize font, size, and color
Text(
'Styled Text',
style: TextStyle(
fontSize: 24,
color: Colors.blue,
),
)Alignment
Control text alignment
Text(
'Centered Text',
textAlign: TextAlign.center,
)Overflow
Handle long text gracefully
Text(
'Very long text...',
overflow: TextOverflow.ellipsis,
)Font Weight
Make text bold or light
Text(
'Bold Text',
style: TextStyle(
fontWeight: FontWeight.bold,
),
)🔹 Basic Text Widget
The simplest way to display text in Flutter:
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 Example')),
body: Center(
child: Text('Welcome to Flutter!'),
),
),
);
}
}Output:
Welcome to Flutter!
🔹 Styled Text
Apply custom styles to your text:
Text(
'Beautiful Text',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.purple,
letterSpacing: 2.0,
fontStyle: FontStyle.italic,
),
)Output:
Beautiful Text
🔹 Rich Text
Display text with multiple styles using RichText:
RichText(
text: TextSpan(
text: 'Hello ',
style: TextStyle(color: Colors.black, fontSize: 20),
children: [
TextSpan(
text: 'Flutter',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
TextSpan(text: ' World!'),
],
),
)Output:
Hello Flutter World!
🔹 Text Properties
Common properties you can use with Text widget:
- maxLines: Limit number of lines
- overflow: Handle text overflow (ellipsis, fade, clip)
- textAlign: Align text (left, right, center, justify)
- softWrap: Enable/disable text wrapping
- textDirection: Set text direction (ltr, rtl)
Text(
'This is a long text that will be limited to 2 lines only',
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.justify,
)