What is Text decoration in Flutter
In Flutter, the Text widget allows you to customize the appearance of the text it displays through its style property. The TextStyle class, which is used to define the style for a Text widget, has a property called decoration which can be used to specify a decoration to be painted along with the text.
The decoration property is of type TextDecoration, which is an enum with the following values:
TextDecoration.none: No decoration is painted. This is the default value.TextDecoration.underline: Paints an underline below the text.TextDecoration.overline: Paints an overline above the text.TextDecoration.lineThrough: Paints a line through the middle of the text.
You can use the TextDecoration enum to specify a single decoration, or you can use the TextDecoration.combine method to combine multiple decorations into a single value.
What is underline Textdecoration in Flutter
In Flutter, the TextDecoration.underline value of the TextDecoration enum specifies that an underline should be drawn below the text. This can be useful for indicating that the text is a link, or for emphasizing certain words or phrases.
To apply an underline to a Text widget in Flutter, you can use the decoration property of the TextStyle class, which is passed to the style property of the Text widget. Here is an example of how to do this:
How to use underline Textdecoration in Flutter
To underline Text in flutter use decoration: TextDecoration.underline.
You can read more about the Text widget in this post:
Flutter Basics – What is and how to use Text widget in Flutter
Text(
'flutterassets.com',
style: TextStyle(fontSize: 30, color: Colors.green,
fontFamily: "Genos",
fontWeight: FontWeight.w900,
decoration: TextDecoration.underline,
),
),
You can also specify the colour of the underline using the decorationColor property of the TextStyle class.
Text(
'Underlined text',
style: TextStyle(
decoration: TextDecoration.underline,
decorationColor: Colors.red,
),
)What is overline Textdecoration in Flutter
In Flutter, the TextDecoration.overline value of the TextDecoration enum specifies that an overline should be drawn above the text. This can be useful for indicating that the text is a link, or for emphasizing certain words or phrases.
How to use overline Textdecoration in Flutter
To apply an overline to a Text widget in Flutter, you can use the decoration property of the TextStyle class, which is passed to the style property of the Text widget. Here is an example of how to do this:
Text(
'Overlined text',
style: TextStyle(
fontSize: 36,
decoration: TextDecoration.overline
),
),You can also specify the colour of the line using the decorationColor and line thickness using decorationThickness properties of the TextStyle class.
Text(
'Overlined text',
style: TextStyle(
fontSize: 36,
decoration: TextDecoration.overline,
decorationColor: Colors.red,
// decorationThickness: 4
),
),
What is lineThrough Textdecoration in Flutter
In Flutter, the TextDecoration.lineThrough value of the TextDecoration enum specifies that a line should be drawn through the middle of the text. This can be useful for indicating that the text is crossed out or deprecated, or for emphasizing certain words or phrases.
How to use lineThrough Textdecoration in Flutter
To apply a line through the middle of a Text widget in Flutter, you can use the decoration property of the TextStyle class, which is passed to the style property of the Text widget. Here is an example of how to do this:
Text(
'Strikethrough text',
style: TextStyle(
fontSize: 36,
decoration: TextDecoration.lineThrough
),
)You can also specify the colour of the line using the decorationColor and line thickness using decorationThickness properties of the TextStyle class.
Text(
'Strikethrough text',
style: TextStyle(
fontSize: 36,
decoration: TextDecoration.lineThrough,
decorationColor: Colors.red,
decorationThickness: 4
),
)
What is Textdecoration.none in Flutter
In Flutter, the TextDecoration.none value of the TextDecoration enum specifies that no decoration should be drawn for the text. This is the default value for the decoration property of the TextStyle class.
To remove any decorations from a Text widget in Flutter, you can set the decoration property to TextDecoration.none. Here is an example of how to do this:
Text(
'Plain text',
style: TextStyle(decoration: TextDecoration.none),
)What is TextDecorationStyle in Flutter
In Flutter, the TextDecorationStyle enum is used to specify the style of a decoration that is drawn by the Text widget. This enum is used in conjunction with the decoration and decorationStyle properties of the TextStyle class.
The TextDecorationStyle enum has the following values:
TextDecorationStyle.solid: A solid line is drawn. This is the default value.TextDecorationStyle.double: Two lines are drawn, with some space in between.TextDecorationStyle.dotted: A dotted line is drawn.TextDecorationStyle.dashed: A dashed line is drawn.TextDecorationStyle.wavy: A wavy line is drawn.
To specify the style of a decoration for a Text widget, you can set the decorationStyle property of the TextStyle class to one of the values of the TextDecorationStyle enum. Here is an example of how to do this:
Text(
'flutterassets.com',
style: TextStyle(fontSize: 40, color: Colors.green,
fontFamily: "Genos",
fontWeight: FontWeight.w900,
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationThickness: 2,
decorationStyle: TextDecorationStyle.dashed,
),
),
//decorationStyle: TextDecorationStyle.dashed,
//decorationStyle: TextDecorationStyle.dotted,
//decorationStyle: TextDecorationStyle.double,
//decorationStyle: TextDecorationStyle.wavy,
Note that the decorationStyle property only affects decorations that are drawn using the underline, overline, or lineThrough values of the TextDecoration enum. If you set the decoration property to TextDecoration.none, the decorationStyle property will have no effect.
