ThemeData configuration in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the primary color of the app theme to blue.

Flutter

ThemeData(
  primaryColor: Colors.[1],
)

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

Ared

Byellow

Cgreen

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name that is not defined in Flutter's Colors class.

Confusing primaryColor with accentColor.

The primaryColor property sets the main color for the app's theme. Using Colors.blue sets it to blue.

2fill in blank

medium

Complete the code to set the background color of the scaffold to white using ThemeData.

Flutter

ThemeData(
  scaffoldBackgroundColor: [1],
)

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

AColors.black

BColors.grey

CColors.white

DColors.blueGrey

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string like 'white' instead of Colors.white.

Confusing scaffoldBackgroundColor with primaryColor.

The scaffoldBackgroundColor property sets the background color of Scaffold widgets. Setting it to Colors.white makes the background white.

3fill in blank

hard

Fix the error in the code to correctly set the text theme's headline1 color to red.

Flutter

ThemeData(
  textTheme: TextTheme(
    headline1: TextStyle(color: Colors.[1]),
  ),
)

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

Agreen

Bred

Cblue

Dyellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string like 'red' instead of Colors.red.

Setting color outside of TextStyle.

The headline1 style in TextTheme controls the style of large headings. Setting its color to Colors.red changes the text color to red.

4fill in blank

hard

Fill both blanks to create a ThemeData with primarySwatch blue and brightness dark.

Flutter

ThemeData(
  primarySwatch: Colors.[1],
  brightness: Brightness.[2],
)

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

Ablue

Blight

Cdark

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name not in Colors for primarySwatch.

Confusing brightness values.

The primarySwatch sets a color palette for the app, and brightness controls light or dark mode. Using Colors.blue and Brightness.dark sets a blue theme with dark mode.

5fill in blank

hard

Fill all three blanks to define a ThemeData with accentColor amber, fontFamily Roboto, and buttonColor green.

Flutter

ThemeData(
  accentColor: Colors.[1],
  fontFamily: '[2]',
  buttonColor: Colors.[3],
)

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

Aamber

BRoboto

Cgreen

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around Colors.amber or Colors.green.

Misspelling the font family name.

The accentColor sets the highlight color, fontFamily sets the app's font, and buttonColor sets the default button color. Using Colors.amber, Roboto, and Colors.green applies these styles.

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