Hi friends.. How are you today?
In this tutorial you can change your font text style on flutter with shadow, gradient, opacity, stroke, border, font size, font color, background color, bold, italic, underline, overline, Strikethrough, letter spacing, word space, etc.
How to add basic styles to text on flutter ?
You can simply add text styles using text’s style property.
Text("How are you today?",
style: new TextStyle(
// Text styles here
)
)
Here let’s learn 15 types style for your text.
Table of Contents
1. Font size
Changing the size of font is important in almost applications. You can simply use the fontSize attribute for this purpose. You need to specify the size in number without any scale like px.
Text("How are you today?",
style: new TextStyle(
fontSize: 20,
)
)
Sample output:
2. Bold
Bold, italic and underline are three major text styles in all types of text editors even on writing using a pen on a paper.
Text("How are you today?",
style: new TextStyle(
fontWeight: FontWeight.bold
)
)
You can customize the font weight thickness using w100, w200, w300, w400, w500, w600, w700, w800 and w900 of various thickness properties.
3.Italic
Here fontStyle property is used to make text is italic
Text("How are you today?",
style: new TextStyle(
fontStyle: FontStyle.italic
)
4. Underline
For getting underline style, ‘TextDecoration’ property is used.
Text("How are you today?",
style: new TextStyle(
decoration: TextDecoration.underline
)
)
5. Overline
Like underline, here a line is place over the text. Same TextDecoration is used and property ‘overline’ is used instead of underline.
Text("How are you today?",
style: new TextStyle(
decoration: TextDecoration.overline
)
)
6. Strikethrough (lineThrough)
A line is place on middle of the text horizontally.
Text("How are you today?",
style: new TextStyle(
decoration: TextDecoration.lineThrough
)
)
7. Font color
You can make the text color different than default black color.
Just use the ‘color’ property.
Text("How are you today?",
style: new TextStyle(
color: Colors.red
)
)
8. Background color
You can change the background color of text color.
Text("How are you today?",
style: new TextStyle(
color: Colors.white,
backgroundColor: Colors.black
)
)
9. Letter Spacing
You can adjust the space between letters. If you give negative value (example: -2), then letters will be shrink more.
Text("How are you today?",
style: new TextStyle(
letterSpacing: 5.0,
)
)
10. Word Spacing
As we adjust letter space, we can also adjust space between words.
Text("How are you today?",
style: new TextStyle(
wordSpacing: 30.0,
)
)
11. Opacity
It is easy to set opacity for your text. You need to set the opacity level with color.
Column(
children: <Widget>[
Text("How are you today?",
style: TextStyle(
fontSize: 30,
color: Colors.black.withOpacity(0.2)
),
),
Text("How are you today?",
style: TextStyle(
fontSize: 30,
color: Colors.black.withOpacity(0.4)
),
),
Text("How are you today?",
style: TextStyle(
fontSize: 30,
color: Colors.black.withOpacity(0.6)
),
),
Text("How are you today?",
style: TextStyle(
fontSize: 30,
color: Colors.black.withOpacity(0.8)
),
),
Text("How are you today?",
style: TextStyle(
fontSize: 30,
color: Colors.black.withOpacity(1.0)
),
),
],
)
12. Border and Stroke
You can make border or stroke using inbuilt paint function.
Text(
"How are you today?",
style: TextStyle(
fontSize: 30,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 2
..color = Colors.green,
),
)
Here you cannot set font color using color: Colors.red method. But you can fill same color with ..style = PaintingStyle.fill property.
But if you want to set a color for a text and another color as stroke, then you need to use stack. Using Stack, we can place a text over another text, here we place same text on another. First text is used for stroke and second text is used for text color. You can read more about stack here.
Stack(
children: <Widget>[
Text("How are you today?",
style: TextStyle(
fontSize: 30,
//color: Colors.blue – will not work
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 4
..color = Colors.red,
),
),
Text("How are you today?",
style: TextStyle(
fontSize: 30,
color: Colors.blue,
),
)
],
)
Note that, text on both ‘Text’s and fontSize should be same, else you cannot get a result like above.
13. Shadow
Making a shadow effects on text is attractive. Simply add shadows property as TextStyle.
shadows: [
Shadow(
blurRadius: 12.0,
color: Colors.red,
offset: Offset(1.0, 5.0),
),
],
You can add more than one shadows for a single text.
Example
Column(
children: <Widget>[
Text("How are you today?",
style: TextStyle(
shadows: [
Shadow(
blurRadius: 12.0,
color: Colors.blue,
offset: Offset(1.0, 5.0),
),
],
fontSize: 30,
),
),
Text("How are you today?",
style: TextStyle(
shadows: [
Shadow(
blurRadius: 12.0,
color: Colors.red,
offset: Offset(1.0, 5.0),
),
],
fontSize: 30,
),
),
Text("How are you today?",
style: TextStyle(
shadows: [
Shadow(
blurRadius: 5.0,
color: Colors.blue,
offset: Offset(1.0, 5.0),
),
Shadow(
blurRadius: 12.0,
color: Colors.red,
offset: Offset(2.0, 6.0),
),
],
fontSize: 30,
),
),
],
)
Where blurRadius adjust the shadow level and Offset(x, y) values denote the position of shadow as x and y axis respectively.
Output
14. Gradients
Adding gradients is more attractive on app design.
Text("How are you today?",
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.w900,
foreground: Paint()
..shader = LinearGradient(
colors: <Color>[
Colors.red,
Colors.black,
Colors.blue
],
).createShader(Rect.fromLTWH(100, 0, 200, 0))
),
),
Inside <Color> parameters, you can add many types of colors that you want to fill on gradients. Inside ‘fromLTWH’ you can adjust the width of the gradient level.
15. Custom Fonts
You change the default font for the text. Here you need to import a new font to your project. You can read more about adding a new font here.
Be First to Comment