Customizing Line Height
The wind plugin provides a comprehensive system for managing line heights in Flutter through the WindTheme
class. By using pre-defined line heights, arbitrary custom values, or programmatic customization, you can ensure your application’s typography aligns with your design specifications.
Default Line Heights 🎨
The WindTheme
class includes several pre-defined line heights, each mapped to intuitive keys. These values are specified in em units and can be directly used with your text components.
Key | Value (em) | Description |
---|---|---|
3 |
0.75 |
Compact line height |
4 |
1 |
Standard compact |
5 |
1.25 |
Slightly expanded |
6 |
1.5 |
Comfortable |
7 |
1.75 |
Spacious |
8 |
2 |
Very spacious |
9 |
2.25 |
Extra spacious |
10 |
2.5 |
Maximum spaciousness |
none |
1 |
No additional spacing |
tight |
1.25 |
Tight spacing |
snug |
1.375 |
Snug spacing |
normal |
1.5 |
Normal spacing |
relaxed |
1.625 |
Relaxed spacing |
loose |
2 |
Loose spacing |
For example:
- Using
leading-3
applies a line height of 0.75em. - Using
leading-8
applies a line height of 2em.
Arbitrary Line Heights 🎯
The wind plugin supports arbitrary line heights for dynamic customization. You can specify custom line heights using the leading-[value]
syntax, where value is the desired height in em units.
Examples:
-
leading-[1.2]
applies a line height of 1.2em. -
leading-[2.8]
applies a line height of 2.8em.
This feature is ideal for achieving unique line heights beyond the predefined values.
Managing Line Heights Dynamically
The WindTheme
class provides methods to check, retrieve, add, and remove line heights dynamically.
Checking if a Line Height Exists
To verify if a specific line height is defined:
bool exists = WindTheme.hasLineHeight('normal');
print(exists); // Output: true
Retrieving a Line Height
To fetch the value of a specific line height:
double height = WindTheme.getLineHeight('tight');
print(height); // Output: 1.25
Adding or Updating a Line Height
To define a new line height or modify an existing one:
// Add a custom line height
WindTheme.setLineHeight('custom', 1.2);
// Update an existing line height
WindTheme.setLineHeight('snug', 1.4);
Removing a Line Height
To remove a line height from the WindTheme
:
WindTheme.removeLineHeight('custom');