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


※2021年1月バージョン

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

- locale
- localizationsDelegates
- supportedLocales

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

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

pub get を経て

```dart
import 'package:flutter_localizations/flutter_localizations.dart';
```

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

```dart
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` を設定することで回避できます。

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

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

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

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

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

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

```dart
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),
  );
}

```