Dark mode on Flutter
Dark mode darkens background colours and provides a more comfortable viewing experience in low light. This is essential for many visually impaired people since a light background colour can be painful or even impossible to look at for an extended period of time. But also people who have problems with their concentration, for example due to a brain disorder, benefit greatly from dark mode.
With Flutter, you can detect dark mode by checking if the platformBrightness
has been set to Brightness.dark
.
When defining an App
, you can define a darkTheme
to letter Flutter automatically use dark mode resources.
import 'dart:ui';
import 'package:flutter/widgets.dart';
/// Dark mode extension
extension DarkMode on BuildContext {
bool get isDarkMode {
return MediaQuery.of(this).platformBrightness == Brightness.dark;
}
}
/// Define dark theme
MaterialApp(
themeMode: ThemeMode.system,
theme: ThemeData(
brightness: Brightness.light,
primaryColor: Colors.red,
),
darkTheme: ThemeData(
brightness: Brightness.dark,
),
);