Styling Text in Flutter – A Complete Guide
📌 Introduction
Text is a fundamental building block of every app—headlines, descriptions, labels, buttons—it's everywhere. In Flutter, styling text is powerful, flexible, and easy once you understand the tools Flutter provides.
In this post, we’ll explore how to style text using the `Text` widget, `TextStyle`, and rich formatting using `Text.rich()`.
---
### 🔑 Basic `Text` Widget Syntax
```dart
Text('Hello Flutter!');
```
That’s it! You have created your first text widget. But by default, this text is plain. Let's make it **look beautiful**.
---
### 🎨 Using `TextStyle` to Style Text
The `TextStyle` class allows you to customize:
* Font size
* Font weight
* Color
* Font family
* Letter spacing
* Word spacing
* Shadows
* Decorations (underline, line-through, overline)
#### 🧪 Example 1: Styling Text Bold and Large
```dart
Text(
'Hello Flutter!',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
);
```
---
### 🖋️ Available Font Weights
| Weight | Code |
| ----------- | ------------------- |
| Thin | `FontWeight.w100` |
| Extra Light | `FontWeight.w200` |
| Light | `FontWeight.w300` |
| Normal | `FontWeight.normal` |
| Medium | `FontWeight.w500` |
| Semi Bold | `FontWeight.w600` |
| Bold | `FontWeight.bold` |
| Extra Bold | `FontWeight.w800` |
| Black | `FontWeight.w900` |
---
### 🎭 Using Google Fonts
To use beautiful fonts, add the [google\_fonts](https://pub.dev/packages/google_fonts) package.
#### `pubspec.yaml`
```yaml
dependencies:
flutter:
sdk: flutter
google_fonts: ^6.0.0
```
#### Example
```dart
import 'package:google_fonts/google_fonts.dart';
Text(
'Hello Stylish Flutter!',
style: GoogleFonts.poppins(
fontSize: 22,
fontWeight: FontWeight.w600,
color: Colors.deepPurple,
),
);
```
---
### 🧵 Add Shadows to Text
```dart
Text(
'Flutter Shadow Text',
style: TextStyle(
fontSize: 28,
color: Colors.black,
shadows: [
Shadow(
blurRadius: 3.0,
color: Colors.grey,
offset: Offset(2.0, 2.0),
),
],
),
);
```
---
### 🔠 Add Letter and Word Spacing
```dart
Text(
'Flutter Spacing',
style: TextStyle(
fontSize: 20,
letterSpacing: 2.0,
wordSpacing: 5.0,
),
);
```
---
### 💅 Underline, Overline, StrikeThrough
```dart
Text(
'Underlined Text',
style: TextStyle(
fontSize: 20,
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.dotted,
),
);
```
You can also use:
* `TextDecoration.overline`
* `TextDecoration.lineThrough`
---
### 🌈 Gradient Colored Text (Using ShaderMask)
Flutter doesn't support gradient text natively, but we can achieve it using `ShaderMask`.
```dart
Shader linearGradient = LinearGradient(
colors: <Color>[Colors.purple, Colors.blue],
).createShader(Rect.fromLTWH(0.0, 0.0, 200.0, 70.0));
Text(
'Gradient Text',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
foreground: Paint()..shader = linearGradient,
),
);
```
---
### 🎨 Rich Text Formatting with `Text.rich()`
You can style parts of the text differently.
```dart
Text.rich(
TextSpan(
text: 'Hello ',
style: TextStyle(fontSize: 20),
children: <TextSpan>[
TextSpan(
text: 'Bold',
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
),
TextSpan(text: ' and '),
TextSpan(
text: 'Italic',
style: TextStyle(fontStyle: FontStyle.italic, color: Colors.green),
),
],
),
);
```
---
### 🌐 Aligning Text
```dart
Text(
'Centered Text',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18),
);
```
Other options: `TextAlign.left`, `right`, `justify`, `start`, `end`.
---
### 💻 Full Example Flutter App
```dart
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
void main() {
runApp(TextStylingDemo());
}
class TextStylingDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Text Styling',
home: Scaffold(
appBar: AppBar(title: Text('Text Styling Demo')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: ListView(
children: [
Text(
'Plain Text',
style: TextStyle(fontSize: 20),
),
SizedBox(height: 10),
Text(
'Bold Blue Text',
style: TextStyle(fontSize: 24, color: Colors.blue, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
Text(
'Underlined Dotted Text',
style: TextStyle(
fontSize: 20,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dotted,
decorationColor: Colors.red,
),
),
SizedBox(height: 10),
Text.rich(
TextSpan(
text: 'Hello ',
children: [
TextSpan(
text: 'World!',
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.orange),
)
],
),
),
SizedBox(height: 10),
Text(
'Google Font Text',
style: GoogleFonts.poppins(fontSize: 22, color: Colors.deepPurple),
),
],
),
),
),
);
}
}
```
---
### 🧠 Final Thoughts
Flutter gives you a lot of power when it comes to text styling. Whether you want basic formatting or advanced rich text and gradients, Flutter has you covered.
Mastering text styling improves your app's UI, readability, and user experience!
---
### 📌 Bonus Tip
For responsive apps, use:
```dart
MediaQuery.of(context).size.width
```
to adjust font sizes dynamically based on screen width.
---
Contact us for software training, education or development
.png)
0 Comments