[bug]: Stacked_Themes ThemeManager

[Sentinel111]

Describe the bug

When I try to use ThemeService I get this error:

"LateInitializationError: Field '_themeManager' has not been initialized."

What operating system do you use?

Linux

Information about the installed tooling

No response

Steps to reproduce the issue

Create a new project with stacked.

Then import the stacked_themes.

Added the line to app.dart:
LazySingleton(classType: ThemeService),

Tried a lot of different setups, including changing the "app.locator" to reflect what is in the readme.

Added the ThemeService to the viewModel, but it also happens as a service.

final _themeService = locator<ThemeService>();

I changed the default methods in home_viewModel to this:

void showDialog() {
    _themeService.toggleDarkLightTheme();
  }

  void showBottomSheet(BuildContext context) {
    getThemeManager(context).toggleDarkLightTheme();
    rebuildUi();
  }

The showDialog function gives me the error:

LateInitializationError: Field '_themeManager' has not been initialized.

The other works, but doesn't rebuild the UI to the new Theme. (Another topic)

Expected behavior

No response

Screenshots

No response

Additional Context

No response

[Sentinel111]

Forgot to mention my main class:

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  setPathUrlStrategy();
  await setupLocator(stackedRouter: stackedRouter);
  await ThemeManager.initialise();
  setupDialogUi();
  setupBottomSheetUi();
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ThemeBuilder(
      defaultThemeMode: ThemeMode.light,
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        scaffoldBackgroundColor: Colors.blue[900],
      ),
      lightTheme: ThemeData(
        brightness: Brightness.light,
        scaffoldBackgroundColor: Colors.blue[100],
      ),
      builder: (context, regularTheme, darkTheme, themeMode) => ResponsiveApp(
        builder: (_) => MaterialApp.router(
          theme: regularTheme,
          darkTheme: darkTheme,
          themeMode: ThemeMode.light,
          routerDelegate: stackedRouter.delegate(),
          routeInformationParser: stackedRouter.defaultRouteParser(),
        ),
      ).animate().fadeIn(
            delay: const Duration(milliseconds: 50),
            duration: const Duration(milliseconds: 400),
          ),
    );
  }
}

[Sentinel111]

I got it to work.

For anyone who is having this issue, these are the steps:

Add the import in the pubspec.

In the app.dart add this line:

Singleton(classType: ThemeService, resolveUsing: ThemeService.getInstance),

Run "stacked generate"
Which adds this line in "app.locator":

locator.registerSingleton(ThemeService.getInstance());

I tried to add this manually without using Stacked generate and doesn't work.

In the main.dart add the Theme Builder really before the "MaterialApp.router":

Widget build(BuildContext context) {
    return ResponsiveApp(
      builder: (_) => ThemeBuilder(
        defaultThemeMode: ThemeMode.system,
        darkTheme: ThemeData(
          brightness: Brightness.dark,
          scaffoldBackgroundColor: Colors.blue[900],
        ),
        lightTheme: ThemeData(
          brightness: Brightness.light,
          scaffoldBackgroundColor: Colors.blue[100],
        ),
        builder: (context, regularTheme, darkTheme, themeMode) =>
            MaterialApp.router(
          theme: regularTheme,
          darkTheme: darkTheme,
          themeMode: themeMode,
          routerDelegate: stackedRouter.delegate(),
          routeInformationParser: stackedRouter.defaultRouteParser(),
        ),
      ).animate().fadeIn(
            delay: const Duration(milliseconds: 50),
            duration: const Duration(milliseconds: 400),
          ),
    );
  }

Got it working in this Test project. Probably will do a PR to create better documentation in the stacked_themes repo.