Automatic theme mode detection

[Azzeccagarbugli]

Hi,

Thanks a lot for this wonderful package that you made.

I'm using it for a project and I think that would be really cool if it could use the auto detection, using the system API, to check if the user is using a dark or light theme to set a custom theme.

Cheers!

[kdsuneraavinash]

Sorry for the late reply.

This is possible using the onInitCallback parameter. Using the callback, it is possible to auto-detect the theme at the app startup and then load a theme by some custom logic. (Because the package does not know what is the dark theme and what is the light theme per se). The following snippet can be used for that. (works in 0.4.0)

import 'package:flutter/scheduler.dart';

ThemeProvider(
  saveThemesOnChange: true, // Auto save any theme change we do
  loadThemeOnInit: false, // Do not load the saved theme(use onInitCallback callback)
  onInitCallback: (controller, previouslySavedThemeFuture) async {
    String savedTheme = await previouslySavedThemeFuture;

    if (savedTheme != null) {
      // If previous theme saved, use saved theme
      controller.setTheme(savedTheme);
    } else {
      // If previous theme not found, use platform default
      Brightness platformBrightness =
          SchedulerBinding.instance.window.platformBrightness;
      if (platformBrightness == Brightness.dark) {
        controller.setTheme('dark');
      } else {
        controller.setTheme('light');
      }
      // Forget the saved theme(which were saved just now by previous lines)
      controller.forgetSavedTheme();
    }
  },
  themes: <AppTheme>[
    AppTheme.light(id: 'light'),
    AppTheme.dark(id: 'dark'),
  ],
  child: ThemeConsumer(
    child: Builder(
      builder: (themeContext) => MaterialApp(
        theme: ThemeProvider.themeOf(themeContext).data,
        title: 'Material App',
        home: HomePage(),
      ),
    ),
  ),
);

I also updated the README.

[kdsuneraavinash]

I'll close the issue now. If you still have a problem, feel free to reopen.