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.