Dark mode support in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable dark mode support in the MaterialApp widget.

Flutter

MaterialApp(
  title: 'My App',
  theme: ThemeData.light(),
  darkTheme: ThemeData.[1](),
  themeMode: ThemeMode.system,
  home: HomePage(),
)

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

Adark

BdarkMode

CdarkTheme

DdarkStyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using ThemeData.darkMode() which does not exist.

Using ThemeData.darkTheme() which is incorrect.

The correct method to create a dark theme is ThemeData.dark().

2fill in blank

medium

Complete the code to set the app's theme mode to always use dark mode.

Flutter

MaterialApp(
  themeMode: ThemeMode.[1],
  home: HomePage(),
)

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

Asystem

Bauto

Clight

Ddark

Attempts:

3 left

💡 Hint

Common Mistakes

Using ThemeMode.system which follows device settings.

Using ThemeMode.light which forces light mode.

ThemeMode.dark forces the app to always use the dark theme.

3fill in blank

hard

Fix the error in the code to properly detect dark mode in a widget.

Flutter

bool isDark = MediaQuery.of(context).[1] == Brightness.dark;

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

AthemeBrightness

Bbrightness

CplatformBrightness

DdarkMode

Attempts:

3 left

💡 Hint

Common Mistakes

Using MediaQuery.of(context).brightness which does not exist.

Using 'darkMode' which is not a MediaQuery property.

MediaQuery.of(context).platformBrightness gives the current brightness mode of the device.

4fill in blank

hard

Fill both blanks to create a widget that changes text color based on dark mode.

Flutter

Text(
  'Hello',
  style: TextStyle(color: isDark ? [1] : [2]),
)

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

AColors.white

BColors.black

CColors.grey

DColors.blue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same color for both modes causing poor contrast.

Using colors that are hard to read on dark or light backgrounds.

In dark mode, text color is usually white; in light mode, black.

5fill in blank

hard

Fill all three blanks to define a dark theme with primary color blue and scaffold background black.

Flutter

ThemeData(
  brightness: Brightness.[1],
  primaryColor: Colors.[2],
  scaffoldBackgroundColor: Colors.[3],
)

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

Adark

Bblue

Cblack

Dlight

Attempts:

3 left

💡 Hint

Common Mistakes

Using Brightness.light instead of dark.

Mixing colors that do not fit dark mode design.

Dark theme uses Brightness.dark, primary color blue, and black background for scaffold.