Dark mode support in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Detecting system dark mode in Flutter

Which code snippet correctly detects if the system is currently using dark mode in a Flutter widget's build method?

Flutter

Widget build(BuildContext context) {
  final brightness = MediaQuery.of(context).platformBrightness;
  // Which option correctly checks for dark mode?
}

A if (MediaQuery.of(context).brightness == ThemeMode.dark) { return Text('Dark mode'); } else { return Text('Light mode'); }

B if (brightness == ThemeMode.dark) { return Text('Dark mode'); } else { return Text('Light mode'); }

C if (Theme.of(context).brightness == Brightness.dark) { return Text('Dark mode'); } else { return Text('Light mode'); }

D if (brightness == Brightness.dark) { return Text('Dark mode'); } else { return Text('Light mode'); }

💡 Hint

Use MediaQuery to get platformBrightness and compare with Brightness.dark.

MediaQuery.of(context).platformBrightness returns Brightness.dark or Brightness.light. Comparing it with Brightness.dark detects dark mode. ThemeMode is not used here.

❓ lifecycle

intermediate

Responding to dark mode changes dynamically

In Flutter, which widget automatically rebuilds when the system dark mode setting changes?

A MaterialApp with themeMode set to ThemeMode.system

B StatelessWidget with a fixed ThemeData

C Container widget with a background color

D StatefulWidget that listens to platformBrightness manually

💡 Hint

Flutter's MaterialApp can adapt themes automatically when themeMode is set properly.

MaterialApp with themeMode: ThemeMode.system listens to system theme changes and rebuilds accordingly. StatelessWidget or Container alone do not respond to system changes automatically.

📝 Syntax

advanced

Correct dark theme definition in Flutter

Which option correctly defines a dark theme with a primary color of blue in Flutter?

A final darkTheme = ThemeData(themeMode: ThemeMode.dark, primaryColor: Colors.blue);

B final darkTheme = ThemeData.dark(primaryColor: Colors.blue);

C final darkTheme = ThemeData(brightness: Brightness.dark, primaryColor: Colors.blue);

D final darkTheme = ThemeData(brightness: ThemeMode.dark, primaryColor: Colors.blue);

💡 Hint

Use ThemeData constructor with brightness set to Brightness.dark.

ThemeData(brightness: Brightness.dark, primaryColor: Colors.blue) correctly sets dark theme with blue primary color. ThemeMode is not a brightness value. ThemeData.dark() does not accept parameters.

🔧 Debug

advanced

Why does the app not switch to dark mode?

A Flutter app uses MaterialApp with themeMode: ThemeMode.system, but it never switches to dark mode even when the system is in dark mode. What is the most likely cause?

Flutter

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData(brightness: Brightness.dark),
  themeMode: ThemeMode.system,
  home: HomeScreen(),
);

A The app's widgets do not use Theme.of(context) to get colors, so theme changes have no effect.

B The device does not support dark mode, so the app cannot switch.

C The themeMode property is ignored unless explicitly set to ThemeMode.dark.

D The darkTheme is missing primaryColor, so it defaults to light mode.

💡 Hint

Check if widgets use the theme colors dynamically.

If widgets use fixed colors instead of Theme.of(context).colorScheme or Theme.of(context).primaryColor, the theme change won't affect their appearance. The themeMode and darkTheme are correctly set.

🧠 Conceptual

expert

Best practice for custom dark mode support

Which approach best supports dark mode in a Flutter app with custom colors and fonts?

A Use only a light theme and manually change colors in widgets based on platformBrightness.

B Define separate ThemeData objects for light and dark themes and switch using themeMode: ThemeMode.system.

C Use ThemeData.light() and override colors dynamically in each widget build method.

D Ignore system dark mode and provide a toggle button that switches colors manually.

💡 Hint

Flutter's theming system is designed to handle multiple themes cleanly.

Defining separate ThemeData for light and dark themes and switching with themeMode: ThemeMode.system is the cleanest and most maintainable approach. Manual color changes in widgets are error-prone and harder to maintain.