ThemeData configuration in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What color will the AppBar background be?

Given this Flutter ThemeData configuration, what color will the AppBar background show?

Flutter

ThemeData(
  primaryColor: Colors.green,
  appBarTheme: AppBarTheme(
    backgroundColor: Colors.red,
  ),
)

A Green

B Red

C Blue

D Default grey

💡 Hint

AppBarTheme backgroundColor overrides primaryColor for AppBar.

The AppBarTheme's backgroundColor property sets the AppBar color, overriding primaryColor.

📝 Syntax

intermediate

Identify the syntax error in ThemeData usage

Which option contains a syntax error in ThemeData configuration?

A ThemeData(primaryColor: Colors.blue, brightness: Brightness.dark)

B ThemeData(primaryColor: Colors.blue, textTheme: TextTheme(bodyText1: TextStyle(fontSize: 16)))

C ThemeData(primaryColor Colors.blue, accentColor: Colors.amber)

D ThemeData(primaryColor: Colors.blue, accentColor: Colors.amber)

💡 Hint

Check for missing colons between property names and values.

Option C is missing a colon after primaryColor, causing a syntax error.

❓ lifecycle

advanced

When does ThemeData update take effect in Flutter?

If you change ThemeData in a Flutter app's MaterialApp dynamically, when will the new theme apply?

A After hot reload but not hot restart

B Only after app restart

C Only after navigating to a new screen

D Immediately after setState triggers rebuild

💡 Hint

ThemeData is part of widget tree and rebuilds with setState.

Changing ThemeData inside MaterialApp and calling setState causes immediate UI rebuild with new theme.

🔧 Debug

advanced

Why does the Text color not change with ThemeData?

You set ThemeData with primaryColor: Colors.red and textTheme with bodyText1 color blue, but Text widgets still show black. Why?

Flutter

ThemeData(
  primaryColor: Colors.red,
  textTheme: TextTheme(
    bodyText1: TextStyle(color: Colors.blue),
  ),
)

// Text widget:
Text('Hello World')

A Text widget must specify style: Theme.of(context).textTheme.bodyText1 explicitly

B Text widget uses default style, ignoring textTheme.bodyText1

C primaryColor overrides textTheme colors always

D Text color is black because ThemeData is not applied

💡 Hint

Text widget uses default style unless told to use theme style.

Text widgets do not automatically use textTheme.bodyText1 unless style is set to Theme.of(context).textTheme.bodyText1.

🧠 Conceptual

expert

What is the effect of brightness in ThemeData?

What does setting brightness: Brightness.dark in ThemeData do in a Flutter app?

A It switches the app to use dark mode colors and adjusts default widget colors accordingly

B It only changes the background color to black but leaves other colors unchanged

C It has no effect unless combined with primaryColor

D It disables all colors and makes the app grayscale

💡 Hint

Brightness controls overall light or dark theme mode.

Brightness.dark sets the app to dark mode, changing default colors of widgets to suit dark backgrounds.

Practice

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

easy

A. To store app data locally

B. To handle user input events

C. To manage app navigation routes

D. To set colors and styles for the entire app

Solution

1. Step 1: Understand ThemeData role

   ThemeData is used to define colors, fonts, and styles globally for the app.

2. Step 2: Compare with other options

   Handling input, navigation, or data storage are unrelated to ThemeData.

3. Final Answer:

   To set colors and styles for the entire app -> Option D

4. Quick Check:

   ThemeData = App-wide styles [OK]

Hint: ThemeData controls app look and feel globally [OK]

Common Mistakes:

• Confusing ThemeData with navigation or data handling
• Thinking ThemeData manages user input
• Assuming ThemeData stores app data

2. Which of the following is the correct way to set the primary color in ThemeData?

easy

A. ThemeData(primaryColor: Colors.blue)

B. ThemeData(colorPrimary: Colors.blue)

C. ThemeData(primary: Colors.blue)

D. ThemeData(color: Colors.blue)

Solution

1. Step 1: Recall ThemeData property names

   The correct property to set the main app color is primaryColor.

2. Step 2: Check each option

   Only primaryColor is valid; others are incorrect property names.

3. Final Answer:

   ThemeData(primaryColor: Colors.blue) -> Option A

4. Quick Check:

   primaryColor sets main color [OK]

Hint: Use primaryColor, not colorPrimary or primary [OK]

Common Mistakes:

• Using wrong property names like colorPrimary
• Omitting 'Color' in property name
• Confusing property with general color

3. What will be the background color of the app if you use this ThemeData?

ThemeData(
  brightness: Brightness.dark,
  scaffoldBackgroundColor: Colors.black,
)

medium

A. Black background

B. White background

C. Blue background

D. Transparent background

Solution

1. Step 1: Analyze scaffoldBackgroundColor

   The scaffoldBackgroundColor is explicitly set to Colors.black, so the background will be black.

2. Step 2: Consider brightness effect

   Brightness.dark sets dark theme defaults but does not override explicit scaffoldBackgroundColor.

3. Final Answer:

   Black background -> Option A

4. Quick Check:

   scaffoldBackgroundColor = Black [OK]

Hint: scaffoldBackgroundColor sets main screen color [OK]

Common Mistakes:

• Assuming brightness.dark changes background automatically
• Ignoring scaffoldBackgroundColor property
• Confusing background with primaryColor

4. Identify the error in this ThemeData configuration:

ThemeData(
  primaryColor: Colors.red,
  primaryColor: Colors.blue,
)

medium

A. The last primaryColor overrides the first, no error

B. Duplicate primaryColor properties cause a syntax error

C. Colors.red is invalid, should be Colors.redAccent

D. ThemeData cannot have primaryColor property

Solution

1. Step 1: Check for duplicate keys in Dart constructors

   Dart does not allow duplicate named parameters in constructor calls; it causes a compile-time syntax error.

2. Step 2: Validate color names and properties

   Colors.red and Colors.blue are valid colors; primaryColor is a valid property.

3. Final Answer:

   Duplicate primaryColor properties cause a syntax error -> Option B

4. Quick Check:

   Duplicate named args = syntax error [OK]

Hint: Duplicate named parameters cause syntax error in Dart [OK]

Common Mistakes:

• Thinking duplicate keys allow last to override
• Confusing color names with invalid ones
• Believing primaryColor is invalid property

5. You want your app to use a light theme with green as the primary color and orange for accent color. Which ThemeData configuration achieves this correctly?

hard

A. ThemeData(brightness: Brightness.light, primarySwatch: Colors.green, colorAccent: Colors.orange)

B. ThemeData(brightness: Brightness.dark, primaryColor: Colors.green, secondaryColor: Colors.orange)

C. ThemeData(brightness: Brightness.light, primaryColor: Colors.green, accentColor: Colors.orange)

D. ThemeData(brightness: Brightness.light, primaryColor: Colors.green, colorAccent: Colors.orange)

Solution

1. Step 1: Set brightness to light

   Use brightness: Brightness.light for a light theme.

2. Step 2: Use correct properties for colors

   primaryColor sets main color, accentColor sets highlight color. Both must be valid.

3. Step 3: Check options for property correctness

   ThemeData(brightness: Brightness.light, primaryColor: Colors.green, accentColor: Colors.orange) uses correct properties and values. Others use wrong property names or brightness.

4. Final Answer:

   ThemeData(brightness: Brightness.light, primaryColor: Colors.green, accentColor: Colors.orange) -> Option C

5. Quick Check:

   Light theme + primaryColor + accentColor = ThemeData(brightness: Brightness.light, primaryColor: Colors.green, accentColor: Colors.orange) [OK]

Hint: Use brightness.light + primaryColor + accentColor correctly [OK]

Common Mistakes:

• Using wrong property names like colorAccent or secondaryColor
• Setting brightness to dark instead of light
• Confusing primarySwatch with primaryColor