Learn

The text of our application doesn’t really stand out. So let’s change the code to make the text big and red!

As mentioned earlier, the Text widget constructor allows multiple parameters including one called style. The style parameter tells the Text widget how to style the text. Let’s use it.

Flutter provides a class called TextStyle that holds style information about our Text. Its constructor allows us to specify attributes such as color and fontSize. Let’s check it out.

We can first create a variable for our TextStyle. Let’s declare this variable near the top, between main and runApp:

void main() {

    const bigRedStyle = TextStyle(color:Colors.red, fontSize: 24);

    runApp(

In bigRedStyle, we have indicated the color and size of the text.

Next, we can add a style parameter to the Text constructor and add the new style we created as its argument.

  Text(
    'Hello, world!',
    style: bigRedStyle
  );

Let’s try it out in the Flutter editor.

Instructions

Let’s add some style to our text.

First, create a variable to hold our TextStyle object. Specify a color and size for our text. Flutter provides a list of supported colors.

Hint

The syntax will be similar to (This includes placeholders):

const aStyle = TextStyle(color: Colors.MY_COLOR, fontSize: MY_SIZE);

Next, set that variable as the style attribute of the Text widget.

Hint

This will look similar to:

  Text(
    'Hello, world!',
    style: STYLE_VARIABLE_HERE
  );

Solution

void main() {
  const bigBlueStyle = TextStyle(color: Colors.blue, fontSize: 36);
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Text(
          'Codecademy: Flutter Edition',
           style: bigBlueStyle
        )
      )
    )
  );
}

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?