Flutter アプリ

【Flutter】漢字が中華フォントになってしまう問題を解決する

2023年9月24日

デフォルトの環境では、漢字は中華フォントになってしまいます。こんな感じです。

将来の将や、今日の今が中華フォントになっています。読めないことはないですが、何か気持ち悪いですね。

本記事の想定読者

  • Flutterでアプリを開発している人

対処方法

対処方法は以下の2ステップで完了です。

flutter_localizationsを追加

以下のコマンドで、flutter_localizationsをインストールします。

flutter pub add flutter_localization

main.dartの修正

main.dartに以下の複数行を追記します。

パッケージをインポートします。

import 'package:flutter_localizations/flutter_localizations.dart';

flutter_localizationの公式リファレンスでは、"import 'package:flutter_localization/flutter_localization.dart';"とlocalizationと単数形となっていますが、localizationsと複数形にしないと、Undefined name 'GlobalMaterialLocalizationsとエラーが出て、アプリを起動できません。

MaterialAppの配下に、localizationsDelegatesとsupportedLocaleを追記します。

      child: MaterialApp(
        // Hide the debug banner
        debugShowCheckedModeBanner: false,
        title: 'ポケット名言',
        // 追記（ここから）
        localizationsDelegates: const [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale("ja", "JP"),
      ],
        // 追記（ここまで）

変更後

変更後、将来の将や今日の今が中華フォントでなくなり、日本人にとって馴染みのあるフォント体になりました。

開発環境

$  flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.13.5, on Microsoft Windows [Version 10.0.19045.3448], locale ja-JP)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.1.4)  
[√] Android Studio (version 2021.1)
[!] Android Studio (version 4.1)
    X Unable to determine bundled Java version.
[!] Android Studio (version 4.2)
    X Unable to determine bundled Java version.
[√] VS Code (version 1.82.2)
[√] Connected device (4 available)
[√] Network resources

-Flutter, アプリ