Text themes in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Flutter code snippet?

Consider this Flutter widget that uses a text theme:

Text(
  'Hello Flutter',
  style: Theme.of(context).textTheme.headlineMedium,
)

What style will the text have if the app's theme sets headlineMedium to 24px font size and blue color?

Flutter

Text('Hello Flutter', style: Theme.of(context).textTheme.headlineMedium)

A Text with 24px font size but default color

B Text with default font size and black color

C Text with 24px font size and blue color

D Text with default font size but blue color

💡 Hint

TextTheme styles override default text styles when applied.

The headlineMedium style from the theme sets both font size and color, so the text uses those.

🧠 Conceptual

intermediate

Which statement about Flutter TextTheme is true?

Choose the correct statement about TextTheme in Flutter.

A <code>TextTheme</code> defines default text styles for different text categories like headline, body, label.

B <code>TextTheme</code> is used only for button text styling.

C <code>TextTheme</code> cannot be customized by the app developer.

D <code>TextTheme</code> styles override widget-specific styles always.

💡 Hint

Think about what TextTheme controls in an app's look.

TextTheme provides a set of named text styles for different uses like headlines and body text. It can be customized and used throughout the app.

📝 Syntax

advanced

What error does this Flutter code produce?

Analyze this Flutter code snippet:

Text(
  'Welcome',
  style: Theme.of(context).textTheme.headlineLarge.copyWith(fontWeight: FontWeight.bold),
)

What error will occur when running this code?

Flutter

Text('Welcome', style: Theme.of(context).textTheme.headlineLarge.copyWith(fontWeight: FontWeight.bold))

A TypeError because copyWith is not a method

B No error, text is bold with headlineLarge style

C Syntax error due to missing semicolon

D NullPointerException because headlineLarge might be null

💡 Hint

Consider if headlineLarge can be null in some themes.

If the theme does not define headlineLarge, it can be null, so calling copyWith on null causes a runtime error.

❓ lifecycle

advanced

When does Flutter apply updated TextTheme styles after a theme change?

If the app's ThemeData changes at runtime, when will widgets using Theme.of(context).textTheme update their text styles?

A Immediately on the next frame after theme change

B Only after restarting the app

C After hot reload but not on hot restart

D Never, text styles are fixed at build time

💡 Hint

Think about Flutter's reactive UI system and how it rebuilds widgets.

Flutter rebuilds widgets that depend on inherited widgets like Theme when the theme changes, so text styles update immediately on the next frame.

🔧 Debug

expert

Why does this Flutter app show default black text ignoring custom TextTheme?

Given this Flutter app snippet:

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyMedium: TextStyle(color: Colors.red),
    ),
  ),
  home: Scaffold(
    body: Center(
      child: Text('Hello'),
    ),
  ),
)

Why does the text appear black instead of red?

A Because <code>Text</code> widget ignores theme styles unless explicitly set

B Because <code>Text</code> uses <code>bodyText2</code> by default, not <code>bodyMedium</code>

C Because <code>TextStyle</code> color must be set in <code>primaryTextTheme</code> not <code>textTheme</code>

D Because <code>Colors.red</code> is not a valid color constant

💡 Hint

Check the default text style used by Text widget.

The Text widget uses bodyText2 style by default, but the theme sets bodyMedium. Since bodyText2 is not set, default black color is used.

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