Dark mode support in Flutter - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is dark mode in mobile apps?

Dark mode is a color scheme that uses dark backgrounds and light text to reduce eye strain and save battery life on devices with OLED screens.

beginner

How do you enable dark mode support in a Flutter app?

You provide both light and dark ThemeData in the MaterialApp widget using the theme and darkTheme properties, and set themeMode to ThemeMode.system to follow the device setting.

intermediate

What Flutter widget helps detect if the app is in dark mode?

The MediaQuery widget provides platformBrightness, which tells if the current theme is light or dark.

intermediate

Why is it important to test your app in both light and dark modes?

Because colors and contrast can look very different, testing ensures text is readable and UI elements are clear in both modes for better user experience.

intermediate

How can you customize colors for dark mode in Flutter?

Define separate color values in your dark ThemeData, such as backgroundColor and textTheme, to create a distinct look that suits dark mode.

Which Flutter property sets the app to follow the system dark mode setting?

A themeMode: ThemeMode.system

B darkTheme: ThemeData.dark()

C brightness: Brightness.dark

D useDarkMode: true

Setting themeMode to ThemeMode.system makes the app use the device's dark or light mode automatically.

What does MediaQuery.of(context).platformBrightness return?

A The battery level

B The current screen size

C The app's theme color

D The device's brightness setting (light or dark)

platformBrightness tells if the device is currently using light or dark mode.

Why should you avoid hardcoding colors in your Flutter app for dark mode?

A Hardcoded colors may not look good in dark mode

B Hardcoded colors improve performance

C Hardcoded colors are required for dark mode

D Hardcoded colors automatically adapt to dark mode

Hardcoded colors might not contrast well in dark mode, making text or UI elements hard to see.

Which Flutter widget is commonly used to apply themes across the app?

A Scaffold

B MaterialApp

C Container

D Text

MaterialApp provides theme and darkTheme properties to apply themes app-wide.

What is a benefit of dark mode for users?

A Makes text harder to read

B Increases battery usage

C Reduces eye strain in low light

D Removes all colors

Dark mode reduces eye strain especially in dark environments and can save battery on OLED screens.

Explain how to implement dark mode support in a Flutter app.

Think about how Flutter lets you define different themes and how to switch between them automatically.

Describe why testing your app in both light and dark modes is important.

Consider how colors and visibility change between modes.

Practice

1. What is the main purpose of using darkTheme in a Flutter app?

easy

A. To define the app's appearance when the device is in dark mode

B. To disable dark mode support in the app

C. To set the default font style for the app

D. To create a theme for tablet devices only

Solution

1. Step 1: Understand the role of darkTheme

   The darkTheme property in MaterialApp defines how the app looks when dark mode is active.

2. Step 2: Compare with other theme properties

   The theme property is for light mode, and darkTheme is specifically for dark mode appearance.

3. Final Answer:

   To define the app's appearance when the device is in dark mode -> Option A

4. Quick Check:

   darkTheme sets dark mode style [OK]

Hint: Remember: darkTheme is for dark mode look [OK]

Common Mistakes:

• Confusing darkTheme with theme (light mode)
• Thinking darkTheme disables dark mode
• Assuming darkTheme affects only fonts

2. Which of the following is the correct way to enable dark mode support in MaterialApp?

easy

A. Set themeMode: ThemeMode.dark and provide darkTheme

B. Set theme: ThemeData.dark() only

C. Set darkTheme: ThemeData.light() only

D. Set themeMode: ThemeMode.light and provide darkTheme

Solution

1. Step 1: Identify how to activate dark mode

   Using themeMode: ThemeMode.dark tells Flutter to use the dark theme.

2. Step 2: Provide the dark theme style

   Providing darkTheme defines the dark mode appearance.

3. Final Answer:

   Set themeMode: ThemeMode.dark and provide darkTheme -> Option A

4. Quick Check:

   Enable dark mode with themeMode and darkTheme [OK]

Hint: Use themeMode with darkTheme to enable dark mode [OK]

Common Mistakes:

• Only setting theme without themeMode
• Using light theme in darkTheme property
• Setting themeMode to light but expecting dark mode

3. Given this Flutter code snippet, what will be the background color when the device is in dark mode?

MaterialApp(
  theme: ThemeData(primaryColor: Colors.white),
  darkTheme: ThemeData(primaryColor: Colors.black),
  themeMode: ThemeMode.system,
  home: Scaffold(
    backgroundColor: Theme.of(context).primaryColor,
  ),
)

medium

A. Blue (default)

B. White

C. Black

D. Transparent

Solution

1. Step 1: Understand themeMode.system behavior

   When themeMode is system, Flutter uses darkTheme if device is in dark mode.

2. Step 2: Check primaryColor in darkTheme

   The darkTheme sets primaryColor to black, so backgroundColor will be black.

3. Final Answer:

   Black -> Option C

4. Quick Check:

   System dark mode uses darkTheme colors [OK]

Hint: themeMode.system uses darkTheme on dark devices [OK]

Common Mistakes:

• Assuming theme (light) colors always apply
• Ignoring themeMode.system behavior
• Confusing primaryColor with backgroundColor default

4. You wrote this code but dark mode is not working as expected. What is the error?

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  home: HomeScreen(),
)

medium

A. theme and darkTheme cannot be used together

B. Missing themeMode property to switch themes

C. Incorrect use of ThemeData.dark()

D. HomeScreen must be wrapped in a Theme widget

Solution

1. Step 1: Check themeMode usage

   Without themeMode, Flutter defaults to light mode and ignores darkTheme.

2. Step 2: Confirm darkTheme is correct

   ThemeData.dark() is valid, so no error there.

3. Final Answer:

   Missing themeMode property to switch themes -> Option B

4. Quick Check:

   themeMode is required to enable dark mode switching [OK]

Hint: Always set themeMode to enable dark mode [OK]

Common Mistakes:

• Forgetting to set themeMode
• Thinking darkTheme alone enables dark mode
• Wrapping home widget unnecessarily

5. You want your Flutter app to automatically switch between light and dark themes based on system settings, but also allow users to manually override the theme. Which approach correctly implements this behavior?

hard

A. Use darkTheme only and switch themes by restarting the app

B. Set themeMode: ThemeMode.system only and ignore user preferences

C. Use only theme and change colors manually in widgets

D. Use theme, darkTheme, and control themeMode with a user setting stored in state

Solution

1. Step 1: Understand system and user control

   To follow system theme and allow manual override, themeMode must be dynamic based on user choice.

2. Step 2: Implement themeMode with user state

   Store user preference in app state and set themeMode accordingly, while providing theme and darkTheme.

3. Final Answer:

   Use theme, darkTheme, and control themeMode with a user setting stored in state -> Option D

4. Quick Check:

   Dynamic themeMode enables system and user control [OK]

Hint: Control themeMode with user state for manual override [OK]

Common Mistakes:

• Ignoring user preferences with fixed themeMode
• Manually changing colors in widgets instead of themes
• Restarting app to apply theme changes