Color schemes in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the primary color of the app's color scheme to blue.

Flutter

final colorScheme = ColorScheme.fromSeed(seedColor: Colors.[1]);

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

Ared

Bblue

Cyellow

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing a color other than blue.

Using a color name that does not exist in Colors.

The seedColor defines the main color for the ColorScheme. Using Colors.blue sets the primary color to blue.

2fill in blank

medium

Complete the code to apply the color scheme to the MaterialApp theme.

Flutter

MaterialApp(
  theme: ThemeData(
    colorScheme: [1],
  ),
  home: const HomePage(),
);

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

AColors.blue

BThemeData.dark()

CThemeData.light()

DcolorScheme

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a color like Colors.blue instead of the color scheme object.

Using ThemeData.light() or ThemeData.dark() directly.

The colorScheme variable holds the color scheme object. It should be passed to ThemeData.colorScheme to apply it.

3fill in blank

hard

Fix the error in the code to correctly create a dark color scheme from a seed color.

Flutter

final darkScheme = ColorScheme.fromSeed(
  seedColor: Colors.deepPurple,
  brightness: [1],
);

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

ABrightness.dark

BBrightness.light

CThemeMode.dark

DThemeData.dark()

Attempts:

3 left

💡 Hint

Common Mistakes

Using ThemeMode.dark instead of Brightness.dark.

Using ThemeData.dark() which is a ThemeData, not a brightness value.

To create a dark color scheme, set brightness to Brightness.dark. Other options are incorrect types or values.

4fill in blank

hard

Fill both blanks to create a color scheme with a custom primary and secondary color.

Flutter

final customScheme = ColorScheme(
  brightness: Brightness.light,
  primary: [1],
  secondary: [2],
  background: Colors.white,
  surface: Colors.white,
  onPrimary: Colors.white,
  onSecondary: Colors.black,
  onBackground: Colors.black,
  onSurface: Colors.black,
  error: Colors.red,
  onError: Colors.white,
);

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

AColors.orange

BColors.green

CColors.purple

DColors.teal

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same color for both primary and secondary.

Choosing colors that do not contrast well.

The primary color is set to Colors.orange and the secondary color to Colors.teal to create a custom color scheme.

5fill in blank

hard

Fill all three blanks to create a color scheme from a seed color with dark brightness and set the error color.

Flutter

final darkCustomScheme = ColorScheme.fromSeed(
  seedColor: [1],
  brightness: [2],
).copyWith(
  error: [3],
);

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

AColors.redAccent

BBrightness.dark

CColors.deepOrange

DColors.blueGrey

Attempts:

3 left

💡 Hint

Common Mistakes

Using a light brightness instead of dark.

Not overriding the error color correctly.

The seed color is set to Colors.blueGrey, brightness to Brightness.dark, and the error color overridden to Colors.redAccent.

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