Ga naar hoofdinhoud
Logo Appt Light

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.

Met Flutter weet je dat donkere modus ingeschakeld is wanneer de platformBrightness ingesteld is op Brightness.dark.

Bij het definiëren van een App, kun je een darkTheme toevoegen zodat Flutter automatisch gebruikt maak van donkere modus varianten.

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,
  ),
);
Bijdragen

Feedback?

Laat 't ons weten!