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.

Practice

1. What is the main purpose of using TextTheme in a Flutter app?

easy

A. To keep text styles consistent across the entire app

B. To create animations for text widgets

C. To load external fonts dynamically

D. To handle user input in text fields

Solution

1. Step 1: Understand the role of TextTheme

   TextTheme defines a set of text styles used throughout the app to maintain consistency.

2. Step 2: Compare with other options

   Options A, C, and D relate to animations, fonts, and input handling, which are not the purpose of TextTheme.

3. Final Answer:

   To keep text styles consistent across the entire app -> Option A

4. Quick Check:

   TextTheme = consistent text styles [OK]

Hint: TextTheme is for consistent text styles app-wide [OK]

Common Mistakes:

• Confusing TextTheme with animation or input handling
• Thinking TextTheme loads fonts
• Assuming TextTheme is for user interaction

2. Which of the following is the correct way to access the headline1 text style from the current theme inside a widget's build method?

easy

A. TextTheme.headline1(context)

B. Theme.textTheme.headline1

C. context.textTheme.headline1

D. Theme.of(context).textTheme.headline1

Solution

1. Step 1: Recall the correct syntax to access text styles

   Use Theme.of(context).textTheme.styleName to get a text style from the current theme.

2. Step 2: Check each option

   Theme.of(context).textTheme.headline1 matches the correct syntax. Options A, B, and D use incorrect or invalid syntax.

3. Final Answer:

   Theme.of(context).textTheme.headline1 -> Option D

4. Quick Check:

   Access text style = Theme.of(context).textTheme.style [OK]

Hint: Use Theme.of(context).textTheme.styleName to get styles [OK]

Common Mistakes:

• Omitting Theme.of(context)
• Trying to call textTheme as a method
• Using context.textTheme directly

3. What will be the color of the text rendered by this code snippet?

Text(
  'Hello',
  style: Theme.of(context).textTheme.bodyText1?.copyWith(color: Colors.red),
)

Assuming the app's theme sets bodyText1 color to blue.

medium

A. Red

B. Blue

C. Default black

D. Transparent

Solution

1. Step 1: Understand style overriding with copyWith

   The copyWith method creates a copy of the original style but overrides specified properties, here the color is set to red.

2. Step 2: Determine final color

   Even though bodyText1 color is blue in the theme, the copyWith(color: Colors.red) changes it to red.

3. Final Answer:

   Red -> Option A

4. Quick Check:

   copyWith overrides color to red [OK]

Hint: copyWith overrides original style properties [OK]

Common Mistakes:

• Assuming original theme color remains unchanged
• Ignoring copyWith effect
• Thinking default black applies

4. Identify the error in this Flutter code snippet that tries to apply a text theme style:

Text(
  'Welcome',
  style: Theme.textTheme.headline6,
)

medium

A. Text widget cannot use style property

B. headline6 is not a valid text style

C. Missing context in Theme.of(context) call

D. Text string must be wrapped in a TextSpan

Solution

1. Step 1: Check how Theme is accessed

   The code uses Theme.textTheme.headline6 which is invalid because Theme is a class and requires context to access the current theme.

2. Step 2: Correct usage

   The correct way is Theme.of(context).textTheme.headline6 to get the style from the current context.

3. Final Answer:

   Missing context in Theme.of(context) call -> Option C

4. Quick Check:

   Theme.of(context) needed to access theme [OK]

Hint: Always use Theme.of(context) to get theme data [OK]

Common Mistakes:

• Using Theme without context
• Assuming headline6 is invalid
• Thinking Text needs TextSpan for style

5. You want to create a custom text theme where the subtitle1 style uses a font size of 18 and green color. Which code snippet correctly defines this inside ThemeData.textTheme?

hard

A. textTheme: TextTheme(subtitle1: TextStyle(font: 18, color: Colors.green))

B. textTheme: TextTheme(subtitle1: TextStyle(fontSize: 18, color: Colors.green))

C. textTheme: TextTheme(subtitle1: TextStyle(fontSize: 18, color: 'green'))

D. textTheme: TextTheme(subtitle1: TextStyle(size: 18, color: Colors.green))

Solution

1. Step 1: Identify correct TextStyle properties

   The correct property for font size is fontSize and color must be a Color object like Colors.green.

2. Step 2: Evaluate each option

   textTheme: TextTheme(subtitle1: TextStyle(fontSize: 18, color: Colors.green)) uses correct property names and values. textTheme: TextTheme(subtitle1: TextStyle(size: 18, color: Colors.green)) uses size which is invalid. textTheme: TextTheme(subtitle1: TextStyle(fontSize: 18, color: 'green')) uses a string for color instead of a Color object. textTheme: TextTheme(subtitle1: TextStyle(font: 18, color: Colors.green)) uses font which is invalid.

3. Final Answer:

   textTheme: TextTheme(subtitle1: TextStyle(fontSize: 18, color: Colors.green)) -> Option B

4. Quick Check:

   fontSize and Colors.green are correct [OK]

Hint: Use fontSize and Colors.green for size and color [OK]

Common Mistakes:

• Using 'size' instead of fontSize
• Passing color as string instead of Color object
• Using invalid property names like font