Wrapping MaterialApp with another builder resulting error: No Parent InheritedWidget of type [TopReactiveStateless ] is found

[karnadii]

I get this error when using localization and DynamicColorBuilder, No Parent InheritedWidget of type [TopReactiveStateless ] is found. Removing dynamicColorBuilder fix this problem. Is there is a way to use both?

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await RM.storageInitializer(HiveStorage());
  runApp(const MainApp());
}

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

  @override
  List<Future<void>>? ensureInitialization() {
    return [authBloc.init()];
  }

  @override
  Widget? splashScreen() {
    return MaterialApp(
      home: Scaffold(
        body: Container(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return DynamicColorBuilder(builder: (
      lightColorScheme,
      darkColorScheme,
    ) {
      return MaterialApp.router(
          routeInformationParser: navigator.routeInformationParser,
          routerDelegate: navigator.routerDelegate,
          locale: i18nRM.locale,
          localeResolutionCallback: i18nRM.localeResolutionCallback,
          localizationsDelegates: i18nRM.localizationsDelegates,
          theme: themeRM.activeTheme());
    });
  }
}

[karnadii]

also InjectedTheme with DynamicColorBuilder support would be awesome.

[karnadii]

I have another problem again, I was using the injected theme feature, but in the end, I want user to add custom color/image to generate their own preffered theme. the injected theme feature doesnt have ability to dynamically add a new theme (maybe for next feature update?). So I change my code from above to something like this:

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

  @override
  List<Future<void>>? ensureInitialization() {
    return [
      authBloc.init(),
    ];
  }

  @override
  Widget? splashScreen() {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // return DynamicColorBuilder(builder: (
    //   lightColorScheme,
    //   darkColorScheme,
    // ) {
    return OnReactive(() {
      return MaterialApp.router(
        routeInformationParser: navigator.routeInformationParser,
        routerDelegate: navigator.routerDelegate,
        locale: i18nRM.locale,
        localeResolutionCallback: i18nRM.localeResolutionCallback,
        localizationsDelegates: i18nRM.localizationsDelegates,
        theme: ThemeData(
          colorSchemeSeed: themeController.themeSelectionMethod.state ==
                  ThemeSelectionMethod.colorSeed
              ? themeController.selectedColorSeed.state.color
              : themeController.colorScheme.state.primary,
          brightness:
              themeController.isDark.state ? Brightness.dark : Brightness.light,
          textTheme: kNunitoTextTheme,
          useMaterial3: true,
        ),
        debugShowCheckedModeBanner: false,
      );
    });

    // });
  }
}

I have the same error like when using dynamicColorBuilder

════════ Exception caught by widgets library ═══════════════════════════════════
The following message was thrown building LoginPage(dirty, state: _ReactiveStatelessWidgetState#db83a):
No Parent InheritedWidget of type [TopReactiveStateless ] is found.
Make sure to use [TopReactiveStateless] widget on top of MaterialApp Widget.
The context used was: LoginPage

The relevant error-causing widget was
LoginPage
injection.dart:151
When the exception was thrown, this was the stack
#0      InjectedI18NImp.of
injected_i18n.dart:273
#1      LoginPage.build
login.dart:15
#2      _ReactiveStatelessWidgetState.build
reactive_stateless_widget.dart:227
#3      StatefulElement.build
framework.dart:5198
#4      ComponentElement.performRebuild
framework.dart:5086
#5      StatefulElement.performRebuild
framework.dart:5251
#6      MyElement.performRebuild
stateful_widget_imp.dart:210
#7      Element.rebuild
framework.dart:4805
#8      ComponentElement._firstBuild
framework.dart:5068
#9      StatefulElement._firstBuild
framework.dart:5242
#10     ComponentElement.mount
framework.dart:5062
...     Normal element mounting (226 frames)
#236    Element.inflateWidget
framework.dart:3971
#237    MultiChildRenderObjectElement.inflateWidget
framework.dart:6570
#238    MultiChildRenderObjectElement.mount
framework.dart:6582
...     Normal element mounting (437 frames)
#675    Element.inflateWidget
framework.dart:3971
#676    Element.updateChild
framework.dart:3708
#677    ComponentElement.performRebuild
framework.dart:5111
#678    StatefulElement.performRebuild
framework.dart:5251
#679    MyElement.performRebuild
stateful_widget_imp.dart:210
#680    Element.rebuild
framework.dart:4805
#681    ComponentElement._firstBuild
framework.dart:5068
#682    StatefulElement._firstBuild
framework.dart:5242
#683    ComponentElement.mount
framework.dart:5062
#684    Element.inflateWidget
framework.dart:3971
#685    Element.updateChild
framework.dart:3702
#686    ComponentElement.performRebuild
framework.dart:5111
#687    StatefulElement.performRebuild
framework.dart:5251
#688    Element.rebuild
framework.dart:4805
#689    BuildOwner.buildScope
framework.dart:2780
#690    WidgetsBinding.drawFrame
binding.dart:903
#691    RendererBinding._handlePersistentFrameCallback
binding.dart:358
#692    SchedulerBinding._invokeFrameCallback
binding.dart:1284
#693    SchedulerBinding.handleDrawFrame
binding.dart:1214
#694    SchedulerBinding.scheduleWarmUpFrame.<anonymous closure>
binding.dart:939
#698    _RawReceivePort._handleMessage (dart:isolate-patch/isolate_patch.dart:189:12)
(elided 3 frames from class _Timer and dart:async-patch)
════════════════════════════════════════════════════════════════════════════════
════════════════════════════════════════════════════════════════════════════════

Wrapping material app with another builder resulting those error, maybe for now I will use other localization plugin outside stateRebuilder. States rebuilder is great, it is easy but I hope the community is more active.

[karnadii]

my workaround for now, without using injected localization

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations_en.dart';
import 'package:flutter_gen/gen_l10n/app_localizations_id.dart';
import 'package:states_rebuilder/states_rebuilder.dart';

@immutable
class Localization {
  final locale = RM.inject(
    () => const Locale("en"),
    debugPrintWhenNotifiedPreMessage: "Localization Service",
    persist: () => PersistState<Locale>(
      key: "__locale__",
      fromJson: (json) => Locale(json),
      toJson: (s) => s.toString(),
    ),
  );
  late final _i18n = RM.inject(() => localizations.state[locale.state]!);
  AppLocalizations get i18n => _i18n.state;

  final localizations = RM.inject(() => {
        const Locale("en"): AppLocalizationsEn(),
        const Locale("id"): AppLocalizationsId(),
      });

  void changeLocale(Locale newLocale) {
    locale.setToHasData(newLocale);
    _i18n.refresh();
  }
}

final localization = Localization();

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

  @override
  List<Future<void>>? ensureInitialization() {
    return [
      authService.init(),
    ];
  }

  @override
  Widget? splashScreen() {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return OnReactive(
      () {
        return MaterialApp.router(
          key: key,
          routeInformationParser: router.routeInformationParser,
          routerDelegate: router.routerDelegate,
          locale: localization.locale.state,
          localizationsDelegates: AppLocalizations.localizationsDelegates,
          supportedLocales: AppLocalizations.supportedLocales,
          theme: ThemeData(
            colorSchemeSeed: themeService.themeSelectionMethod.state ==
                    ThemeSelectionMethod.colorSeed
                ? themeService.selectedColorSeed.state.color
                : themeService.colorScheme.state.primary,
            brightness:
                themeService.isDark.state ? Brightness.dark : Brightness.light,
            textTheme: kNunitoTextTheme,
            useMaterial3: true,
          ),
          debugShowCheckedModeBanner: false,
        );
      },
    );
  }
}