How could I access the localisations (translations) in my services, when these services are defined in a MultiProvider that sits above the MaterialApp?

Now I get "Error: Could not find the correct Provider above this _DefaultInheritedProviderScope<.... etc."

This makes sense, but I want to have these services accessible for my whole app, so they have to be above the MaterialApp.

class MyApp extends StatelessWidget {
  MyApp({
    this.isZebra,
    this.scanWithCamera,
  });
  final bool isZebra;
  final bool scanWithCamera;

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: providers(isZebra: isZebra, scanWithCamera: scanWithCamera),
      child: Builder(
        builder: (BuildContext context) => MaterialApp(
          localizationsDelegates: [
            S.delegate,
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
            GlobalCupertinoLocalizations.delegate,
          ],
          supportedLocales: S.delegate.supportedLocales,
          theme: companyTheme(context),
          onGenerateTitle: (context) => S.of(context).title,
          navigatorObservers: [
            Provider.of<RouteObserver>(
              context,
              listen: false,
            ),
          ],
          home: S005StartupPage(),
        ),
      ),
    );
  }
}


Solution 1: Sander Roest

I ended up moving the MultiProvider to the builder method of the MaterialApp. This essentially was the answer to my question.

Unfortunately, the RouteObserver has to stay above the MaterialApp as it needs to be passed to the navigatorObservers parameter of the MaterialApp.

Now it's possible to access the translation code [S.of(_context)] that's in the TranslationService, so other services can make use of translations.

class MyApp extends StatelessWidget {
  MyApp({
    this.isZebra,
    this.scanWithCamera,
  });
  final bool isZebra;
  final bool scanWithCamera;

  @override
  Widget build(BuildContext context) {
    return Provider<RouteObserver>(
      create: (_) => RouteObserver(),
      child: Builder(builder: (context) {
        return MaterialApp(
          builder: (context, child) => MultiProvider(
            providers: providers(
              isZebra: isZebra,
              scanWithCamera: scanWithCamera,
            ),
            child: child,
          ),
          localizationsDelegates: [
            S.delegate,
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
            GlobalCupertinoLocalizations.delegate,
          ],
          supportedLocales: S.delegate.supportedLocales,
          theme: companyTheme(context),
          onGenerateTitle: (context) => S.of(context).title,
          navigatorObservers: [
            Provider.of<RouteObserver>(
              context,
              listen: false,
            ),
          ],
          home: S005StartupPage(),
        );
      }),
    );
  }
}