How to set Font Size Weight Color Decoration of Text in Flutter

How to set Font Size, Weight, Color, Decoration of Text in Flutter

In Flutter, you can set the font size, weight, color, and decoration of text using the TextStyle widget. The TextStyle widget is used to define the text style, including the font family, font size, font weight, color, and text decoration.

Here’s an example of how to set font size, weight, color, and decoration of text in Flutter:

Text(
  'Hello, World!',
  style: TextStyle(
    fontSize: 20, // Font size
    fontWeight: FontWeight.bold, // Font weight
    color: Colors.blue, // Text color
    decoration: TextDecoration.underline, // Text decoration
  ),
)

In this example, the Text widget displays the text “Hello, World!” with a font size of 20, a font weight of bold, a text color of blue, and an underline text decoration.

Here’s a breakdown of each property:

• fontSize: sets the font size of the text.
• fontWeight: sets the font weight of the text. It can be set to values like FontWeight.bold, FontWeight.normal, FontWeight.w100 to FontWeight.w900 or any other custom font weight.
• color: sets the text color. It can be set to any Color value or even a Gradient.
• decoration: sets the text decoration, which can be TextDecoration.none, TextDecoration.underline, TextDecoration.overline, TextDecoration.lineThrough, or a combination of them.

You can also combine these properties to create more complex text styles. For example:

Text(
  'Hello, World!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.w500,
    color: Colors.redAccent,
    decoration: TextDecoration.combine([
      TextDecoration.underline,
      TextDecoration.overline,
    ]),
  ),
)

In this example, the text is displayed with a font size of 24, a font weight of 500, a text color of red accent, and both an underline and an overline text decoration.