Flutterで中国語フォントになってしまうときの設定 #Flutter

※2021年1月バージョン

Flutter で中国語のフォントが表示されてしまう問題が発生した場合で日本語フォントに設定したいときはMaterialAppの以下のプロパティを設定しましょう。

locale
localizationsDelegates
supportedLocales

まず pubspec.yaml に flutter_localizations を追加します。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # 追加
    sdk: flutter         # 追加

pub get を経て

import 'package:flutter_localizations/flutter_localizations.dart';

しつつ、MaterialAppに設定します。

const locale = Locale("ja", "JP");
return MaterialApp(
  theme: yourTheme,
  locale: locale,
  localizationsDelegates: const [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: const [
    locale,
  ],
  home: const _YourHomePAge(),
);

以下の2019年に書いた Typography の TextStyle への fontFamily と locale の設定は行わなくても日本語になるようです。

※これ以降の記述は2019年当時のものなので、動作しない可能性があります

Flutter で中国語のフォントが表示されてしまう問題が発生した場合は TextStyle に fontFamily と locale を設定することで回避できます。

Text(
  style: TextStyle(
    fontFamily: "Hiragino Sans",
    locale: Locale("ja", "JP"),
  ),
);

※最新のFlutterは改善されているので、初期設定のままで問題ない可能性があります。もし問題に遭遇したら以下のコードを参考にしてみてください。

すべての TextStyle に設定して回るのは面倒なので MaterialApp の theme に設定してしまいましょう。

final themeData = ThemeData(
  typography: kTypography, // fontFamily と locale が設定してあるものを指定する
  ...
);

return MaterialApp(
  theme: themeData,
  locale: kLocale,
  supportedLocales: [kLocale],
  home: child,
  ...
);

上記の kTypography は以下のような感じで初期化しています。

import 'package:flutter/foundation.dart' show defaultTargetPlatform;
import 'package:flutter/material.dart';

// 日本オンリーの場合は固定で
const Locale kLocale = const Locale("ja", "JP");

// AndroidとiOSでフォントが違う
const String kFontFamilyAndroid = null;
const String kFontFamilyCupertino = "Hiragino Sans";

final bool _android = defaultTargetPlatform == TargetPlatform.android;

final String _kFontFamily = _android ? kFontFamilyAndroid : kFontFamilyCupertino;

final TextTheme _whiteTextTheme = _android ? Typography.whiteMountainView : Typography.whiteCupertino;
final TextTheme _blackTextTheme = _android ? Typography.blackMountainView : Typography.blackCupertino;

// Flutter標準のTextThemeをベースにして
// fontFamilyとlocaleを設定したTextStyleとTextThemeで作る
final Typography kTypography = Typography(
  platform: defaultTargetPlatform,
  white: _textTheme(_whiteTextTheme),
  black: _textTheme(_blackTextTheme),
  englishLike: _textTheme(Typography.englishLike2014),
  dense: _textTheme(Typography.dense2014),
  tall: _textTheme(Typography.tall2014),
);

TextStyle _textStyle(TextStyle base) {
  return base.copyWith(
    fontFamily: _kFontFamily,
    locale: kLocale,
    textBaseline: TextBaseline.ideographic,
  );
}

TextTheme _textTheme(TextTheme base) {
  return base.copyWith(
    display4: _textStyle(base.display4),
    display3: _textStyle(base.display3),
    display2: _textStyle(base.display2),
    display1: _textStyle(base.display1),
    headline: _textStyle(base.headline),
    title: _textStyle(base.title),
    subhead: _textStyle(base.subhead),
    body2: _textStyle(base.body2),
    body1: _textStyle(base.body1),
    caption: _textStyle(base.caption),
    button: _textStyle(base.button),
    overline: _textStyle(base.overline),
  );
}