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.