Text themes in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply the headline1 style from the current theme to the Text widget.

Flutter

Text(
  'Hello Flutter',
  style: Theme.of(context).textTheme.[1],
)

Drag options to blanks, or click blank then click option'

Asubtitle1

BbodyText1

Ccaption

Dheadline1

Attempts:

3 left

💡 Hint

Common Mistakes

Using bodyText1 or caption which are smaller text styles.

Forgetting to access textTheme from Theme.of(context).

The headline1 style is used for large titles. Using Theme.of(context).textTheme.headline1 applies this style to the Text widget.

2fill in blank

medium

Complete the code to get the bodyText2 style from the current theme and apply it to the Text widget.

Flutter

Text(
  'Welcome to Flutter',
  style: Theme.of(context).textTheme.[1],
)

Drag options to blanks, or click blank then click option'

Aheadline6

Bbutton

CbodyText2

Doverline

Attempts:

3 left

💡 Hint

Common Mistakes

Using headline6 which is for smaller headings.

Using button or overline which are for special text styles.

bodyText2 is the default style for regular body text in Flutter's textTheme.

3fill in blank

hard

Fix the error in the code to correctly apply the subtitle1 style from the theme to the Text widget.

Flutter

Text(
  'Subtitle Text',
  style: Theme.of(context).textTheme.[1],
)

Drag options to blanks, or click blank then click option'

Asubtitle1

Bsubtitle2

Cheadline5

Dcaption

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses after the style name causing a syntax error.

Using the wrong style name.

textTheme styles are properties, not methods. Remove the parentheses to fix the error.

4fill in blank

hard

Fill both blanks to create a Text widget that uses the caption style and sets its color to red.

Flutter

Text(
  'Caption Text',
  style: Theme.of(context).textTheme.[1]?.copyWith(color: Colors.[2]),
)

Drag options to blanks, or click blank then click option'

Acaption

Bheadline1

Cred

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using headline1 instead of caption for small text.

Setting color to blue instead of red.

caption is the style for small text. copyWith lets you change the color to red.

5fill in blank

hard

Fill all three blanks to create a Text widget that uses headline4 style, makes the font weight bold, and sets the font size to 30.

Flutter

Text(
  'Big Bold Text',
  style: Theme.of(context).textTheme.[1]?.copyWith(fontWeight: FontWeight.[2], fontSize: [3]),
)

Drag options to blanks, or click blank then click option'

Aheadline4

Bbold

C30

Dnormal

Attempts:

3 left

💡 Hint

Common Mistakes

Using normal fontWeight instead of bold.

Using a smaller font size or wrong style.

headline4 is a large text style. copyWith lets you change fontWeight to bold and fontSize to 30.