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.