🥶

【Flutter】Slangを使うとWebで「No MaterialLocalizations found.」というエラーが出た

2023/12/23に公開

Flutter

error

slang

tech

問題

FlutterでLocalizeを対応する際にSlangというプラグインを利用しました。
https://pub.dev/packages/slang

日本語と英語でそれぞれ言語のセットアップをし、iPhone(Simulator)で起動すると特に問題なく起動しました。

strings.i18n.json -> 日本語 (デフォルトとして指定)
strings_en.i18n.json　-> 英語ファイル

しかしWebで起動すると以下のエラーが発生し、Slangでの文字列を表示しているWidgetで赤のエラー表示になっていました。

══╡ EXCEPTION CAUGHT BY WIDGETS ╞═══════════════════════════════════════════════════════════════════
The following message was thrown:
Warning: This application's locale, jp, is not supported by all of its localization delegates.

• A CupertinoLocalizations delegate that supports the jp locale was not found.
• A MaterialLocalizations delegate that supports the jp locale was not found.

The declared supported locales for this app are: jp, en

See https://flutter.dev/tutorials/internationalization/ for more information about configuring an
app's locale, supportedLocales, and localizationsDelegates parameters.
════════════════════════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: No MaterialLocalizations found.

エラー内容的にMaterialAppの引数の一つであるsupportedLocalesでjpやenが設定させれていないのかなと思っています。が、

現状以下に設定しています。

  @override
  Widget build(BuildContext context) {
    final t = Translations.of(context);
    return MaterialApp(
      title: t.appName,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(title: t.appName),
      locale: TranslationProvider.of(context).flutterLocale,
      supportedLocales: AppLocaleUtils.supportedLocales,
      localizationsDelegates: GlobalMaterialLocalizations.delegates,
    );
  }

一応、こちらのSlangのGet Started通りに設定できているのかなと思っています。

解決した方法

結果はめちゃくちゃ凡ミスというか、Get Startedとは関係ないところが原因で発生していました。。。

まず、なぜiPhoneで正常に動作していたからというとSimulatorはデフォルトの言語が英語になっており、ローカライズ的にenの文字列が使われていました。そのため、enの情報が利用されるためエラーなく表示されていました。

Webの場合デフォルトの文言は日本語になっている？ため、日本語のデータが呼ばれる想定だったのですが、Slangのデフォルト文言をしているするslang.yamlで以下のように設定していました。

base_locale: jp

はい、、、、
正しくはjaと指定するのが正しいです、、、、

今回の原因としては、Get Started通りにLocaleSettings.useDeviceLocale();という関数を使ってそのデフォルトの言語コードを取得するのですが、Webの場合はChromeの言語設定を取得、それがjaとして取得されます。
そうすると、アプリ的にはjpという言語コードは設定していますが、jaという言語コードはなくNo MaterialLocalizations found.というエラーが発生してしまっていたということでした。

なので、iPhoneでも日本語の設定をしておけば、実は今回の現象はiPhoneでも発生するというものでした。

文字コードは正確に設定しないと、そのローカライズ設定が見つけられずにエラーが表示されてしまうようでした。
凡ミスですが、どうしてエラー表示になっているが分かるまで時間がかかったので同じような境遇な人の助けになれば幸いです、、、

問題

解決した方法

Discussion