[ Flutter "automatic" dark mode ]

Question

Developing a new Flutter app, pretty consequent, and was wondering to add a dark mode. Is there such a library/package that would automatically apply a dark mode on your actual app?

Like the "Dark Reader" google chrome plugin does on websites ?

No need to be "perfect", just to be "plug and play".

Thanks for answers/hints.

Answer 1

In order to enable dark mode for your Flutter app, you have to do the following changes:

Define ThemeData with dark colors that you want in the app.

class AppTheme {
  static const Color primary = Color(0xFF000000);
  static const Color scaffoldBackgroundColor = Color(0xFF1E1E1E);

  static final theme = ThemeData(
    primaryColor: primary,
    scaffoldBackgroundColor: scaffoldBackgroundColor,
    textTheme: const TextTheme(
      bodySmall: TextStyle(
        color: Colors.white,
        fontSize: 16,
      ),
      bodyMedium: TextStyle(
        color: Colors.white,
        fontSize: 20,
      ),
      bodyLarge: TextStyle(
        color: Colors.white,
        fontSize: 24,
      ),
    ),
  );
}

Then, in the main.dart file, you can define your root widget as follows:

MaterialApp(
  title: 'My App',
  theme: AppTheme.theme,
  themeMode: ThemeMode.dark,
  home: const Scaffold(),
)