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.