Change text style in flutter

September 13, 2022

One of the great things about Flutter is that it offers a wide range of options for customizing the look and feel of an application. This includes the ability to change the text style. In this article, we'll take a look at how to change the text style in Flutter.

Text(
    'Here will be the text',
    style: TextStyle(
        color: Colors.blue,
        fontWeight: FontWeight.bold,
        fontSize: 30.0,
        fontStyle: FontStyle.italic,
        fontFamily: 'cursive'
    ),
),

# Change the color of the text:

You can use the "color" property to change the color of the text. The value of this property can be either a color value (in HEX, RGB, or HSV format), or a list of color values.

Text(
    'Hello World',
    style: TextStyle(
        color: Colors.blue,
    ),
),

# Change the font weight of the text:

You can use the "fontWeight" property to change the font weight of the text. The value of this property can be either a number (in points), or a string value.

Text(
    'Hello World',
    style: TextStyle(
        fontWeight: FontWeight.bold,
    ),
),

The above code will convert the text to bold format.

# Change the font size of the text:

You can use the "fontSize" property to change the font size of the text. The value of this property can be either a number (in points), or a string value.

Text(
    'Hello World',
    style: TextStyle(
        fontSize: 30.0,
    ),
),

# Change the font style of the text:

You can use the "fontStyle" property to change the font style of the text. The value of this property can either be "normal" or "italic".

Text(
    'Hello World',
    style: TextStyle(
        fontStyle: FontStyle.italic,
    ),
),

# Change the font family of the text:

You can use the "fontFamily" property to change the font family of the text. The value of this property can be either a string value or a list of string values.

Text(
    'Hello World',
    style: TextStyle(
        fontFamily: 'Roboto'
    ),
),

Was this helpful?