The TextStyle class in Flutter is used to define the style properties for text within the Text widget. Here is a list of some key attributes of the TextStyle class along with a sample example showcasing each attribute:
fontSize (double):
- Specifies the size of the text.
Text(
'Font Size Example',
style: TextStyle(fontSize: 24.0),
)
fontWeight (FontWeight):
- Determines the thickness of the characters. Options include FontWeight.bold, FontWeight.normal, etc.
Text(
'Bold Text Example',
style: TextStyle(fontWeight: FontWeight.bold),
)
fontStyle (FontStyle):
- Defines the style of the text, such as normal, italic, etc.
Text(
'Italic Text Example',
style: TextStyle(fontStyle: FontStyle.italic),
)
color (Color):
- Sets the color of the text.
Text(
'Colored Text Example',
style: TextStyle(color: Colors.blue),
)
letterSpacing (double):
- Specifies the space between characters.
Text(
'Letter Spacing Example',
style: TextStyle(letterSpacing: 2.0),
)
wordSpacing (double):
- Determines the space between words.
Text(
'Word Spacing Example',
style: TextStyle(wordSpacing: 4.0),
)
decoration (TextDecoration):
- Adds decorations to the text, such as underline or line-through.
Text(
'Underlined Text Example',
style: TextStyle(decoration: TextDecoration.underline),
)
decorationColor (Color):
- Sets the color of the text decoration.
Text(
'Underlined Text with Color Example',
style: TextStyle(
decoration: TextDecoration.underline,
decorationColor: Colors.red,
),
)
decorationStyle (TextDecorationStyle):
- Defines the style of the text decoration line.
Text(
'Dashed Underline Example',
style: TextStyle(
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed,
),
)
background (Paint):
- Sets the background color of the text.
Text(
'Text with Background Color',
style: TextStyle(
background: Paint()..color = Colors.yellow,
),
)
These examples demonstrate various style attributes that can be applied to text in Flutter using the TextStyle class. You can mix and match these attributes to achieve the desired visual appearance for your text.
Here's a comprehensive example that combines various attributes of the TextStyle class 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('TextStyle Attributes Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'1. Font Size and Color Example',
style: TextStyle(fontSize: 24.0, color: Colors.blue),
),
Text(
'2. Bold and Italic Text Example',
style: TextStyle(
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
),
),
Text(
'3. Letter and Word Spacing Example',
style: TextStyle(letterSpacing: 2.0, wordSpacing: 4.0),
),
Text(
'4. Underlined Text Example',
style: TextStyle(decoration: TextDecoration.underline),
),
Text(
'5. Underlined Text with Color and Style Example',
style: TextStyle(
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.dashed,
),
),
Text(
'6. Text with Background Color Example',
style: TextStyle(
background: Paint()..color = Colors.yellow,
),
),
],
),
),
),
);
}
}
ย