Color schemes in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What color will the text display?

Given this Flutter code snippet, what color will the text "Hello" appear on the screen?

Flutter

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
  ),
  home: Scaffold(
    body: Builder(
      builder: (context) => Center(
        child: Text('Hello', style: TextStyle(color: Theme.of(context).colorScheme.primary)),
      ),
    ),
  ),
)

A White color

B Black color

C Red color

D A shade of blue derived from the seed color

💡 Hint

The colorScheme.primary uses the seed color to generate its primary color.

The ColorScheme.fromSeed creates a color scheme based on the seed color blue. The primary color in the scheme is a shade of blue derived from that seed.

🧠 Conceptual

intermediate

What does ColorScheme.brightness control?

In Flutter's ColorScheme, what is the role of the brightness property?

A It sets the saturation level of the colors

B It controls the transparency of all colors in the scheme

C It defines whether the color scheme is light or dark, affecting default background and text colors

D It determines the font size used in the app

💡 Hint

Think about how apps switch between light and dark modes.

The brightness property tells Flutter if the color scheme is light or dark, which influences default background and text colors for readability.

📝 Syntax

advanced

Which code correctly creates a dark ColorScheme with a custom primary color?

Select the Flutter code snippet that correctly creates a dark ColorScheme with a primary color of deep purple.

A ColorScheme.dark(primary: Colors.deepPurple)

B ColorScheme.dark(primaryColor: Colors.deepPurple)

C ColorScheme.dark(primary: Color.deepPurple)

D ColorScheme.dark(primaryColor: Color(0xFF673AB7))

💡 Hint

Check the exact property name used in ColorScheme.

The correct property name is 'primary'. 'primaryColor' is not valid in ColorScheme constructor. Color.deepPurple is invalid; Colors.deepPurple is correct.

❓ lifecycle

advanced

When does Flutter apply a new ColorScheme after theme change?

If you update the ColorScheme in ThemeData dynamically, when does Flutter apply the new colors to the UI?

A Only when the user navigates to a new screen

B Immediately on the next frame after setState triggers rebuild

C After a delay of 5 seconds automatically

D Only after restarting the app

💡 Hint

Think about how Flutter rebuilds widgets after state changes.

Flutter applies theme changes immediately on the next frame after setState triggers a rebuild, updating UI colors dynamically.

🔧 Debug

expert

Why does this app show default colors ignoring custom ColorScheme?

This Flutter app uses ThemeData with a custom ColorScheme, but the UI still shows default colors. What is the most likely cause?

Flutter

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.light(primary: Colors.orange),
  ),
  home: Scaffold(
    appBar: AppBar(title: Text('Test')),
    body: Center(child: Text('Hello')),
  ),
)

A AppBar uses its own default color because it does not use the colorScheme by default

B ColorScheme.light is invalid and ignored

C Text widget ignores theme colors by default

D MaterialApp requires a dark theme to apply custom colors

💡 Hint

Check how AppBar gets its colors from the theme.

AppBar uses the primaryColor from ThemeData by default, not the colorScheme.primary. To use colorScheme colors, you must set useMaterial3: true or customize AppBarTheme.

Practice

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

easy

A. To create animations for color changes

B. To group related colors for consistent app styling

C. To load images with color filters

D. To define font styles for text widgets

Solution

1. Step 1: Understand ColorScheme role

   A ColorScheme groups colors like primary, secondary, background for consistent use.

2. Step 2: Identify purpose in app design

   This grouping helps keep colors uniform across the app's widgets and themes.

3. Final Answer:

   To group related colors for consistent app styling -> Option B

4. Quick Check:

   ColorScheme = Group colors [OK]

Hint: ColorScheme groups colors for consistent app look [OK]

Common Mistakes:

• Confusing ColorScheme with animations
• Thinking it controls fonts or images
• Using ColorScheme only for backgrounds

2. Which of the following is the correct way to create a light color scheme in Flutter?

easy

A. ThemeData.light(primaryColor: Colors.blue)

B. ColorScheme.dark(primary: Colors.blue)

C. ColorScheme.light(primary: Colors.blue)

D. ThemeData.dark(primaryColor: Colors.blue)

Solution

1. Step 1: Identify light scheme constructor

   Flutter provides ColorScheme.light() to create a light color scheme.

2. Step 2: Check usage with primary color

   Passing primary: Colors.blue sets the main color in the scheme.

3. Final Answer:

   ColorScheme.light(primary: Colors.blue) -> Option C

4. Quick Check:

   Light scheme uses ColorScheme.light() [OK]

Hint: Use ColorScheme.light() for light mode colors [OK]

Common Mistakes:

• Using ColorScheme.dark() for light mode
• Confusing ThemeData with ColorScheme
• Passing colors to wrong constructors

3. Given this code snippet, what color will the FloatingActionButton use for its background?

final scheme = ColorScheme.dark(primary: Colors.red);
return FloatingActionButton(
  backgroundColor: scheme.primary,
  onPressed: () {},
  child: Icon(Icons.add),
);

medium

A. Blue

B. Green

C. Default grey

D. Red

Solution

1. Step 1: Analyze ColorScheme.dark usage

   The scheme is dark with primary: Colors.red, so primary color is red.

2. Step 2: Check FloatingActionButton background

   The button's backgroundColor is set to scheme.primary, which is red.

3. Final Answer:

   Red -> Option D

4. Quick Check:

   scheme.primary = red [OK]

Hint: backgroundColor uses scheme.primary color [OK]

Common Mistakes:

• Assuming default color instead of scheme.primary
• Confusing dark scheme colors with light scheme
• Ignoring the assigned primary color

4. What is wrong with this code snippet that tries to create a dark color scheme?

final scheme = ColorScheme.dark(primaryColor: Colors.green);

medium

A. The property should be named 'primary' not 'primaryColor'

B. ColorScheme.dark() does not accept any parameters

C. Colors.green is not allowed in dark schemes

D. Missing import for Colors

Solution

1. Step 1: Check ColorScheme.dark parameters

   The correct property name is primary, not primaryColor.

2. Step 2: Understand parameter naming

   Using primaryColor causes a syntax error because it is not recognized.

3. Final Answer:

   The property should be named 'primary' not 'primaryColor' -> Option A

4. Quick Check:

   Use 'primary' property in ColorScheme [OK]

Hint: Use 'primary' property, not 'primaryColor' in ColorScheme [OK]

Common Mistakes:

• Using 'primaryColor' instead of 'primary'
• Thinking ColorScheme.dark() takes no parameters
• Assuming Colors.green is invalid in dark mode

5. You want to create a custom color scheme that changes the background color based on light or dark mode. Which approach correctly applies this in Flutter?

hard

A. Use ThemeData.from(colorScheme: ColorScheme.light()) for light mode and ThemeData.from(colorScheme: ColorScheme.dark()) for dark mode, switching based on brightness.

B. Manually set background colors in every widget without using ColorScheme.

C. Use only ColorScheme.light() and ignore dark mode.

D. Set background color directly in Scaffold without using themes.

Solution

1. Step 1: Understand theme switching

   Flutter apps switch themes by detecting brightness (light or dark mode).

2. Step 2: Use ThemeData.from with ColorScheme

   Using ThemeData.from(colorScheme: ...) applies the color scheme properly for each mode.

3. Step 3: Avoid manual color setting

   Manual color setting is error-prone and inconsistent compared to using themes.

4. Final Answer:

   Use ThemeData.from(colorScheme: ColorScheme.light()) for light mode and ThemeData.from(colorScheme: ColorScheme.dark()) for dark mode, switching based on brightness. -> Option A

5. Quick Check:

   ThemeData.from + ColorScheme = correct approach [OK]

Hint: Use ThemeData.from with ColorScheme for mode-based colors [OK]

Common Mistakes:

• Setting colors manually in widgets
• Ignoring dark mode color schemes
• Not using ThemeData.from for color schemes