ログインユーザー登録
トレンド質問OrganizationイベントQiita Blog
Flutter
34
16
記事の改善
編集リクエストを送る
記事の情報
編集履歴編集リクエスト一覧LGTMしたユーザー一覧Markdown で本文を見る
問題がある記事を報告する
どのような問題がありますか？

この記事は最終更新日から1年以上が経過しています。

@najeira

投稿日

更新日

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),
  );
}
ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
  1. あなたにマッチした記事をお届けします
    ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
  2. 便利な情報をあとで効率的に読み返せます
    気に入った記事を「ストック」することで、あとからすぐに検索できます
najeira
Software developer。Google Cloud(特にApp Engine)とFlutterのGoogle Developers Expert。好きな言語はGo。他Flutter/Dart, Android, iOS, Python。
この記事は以下の記事からリンクされています
rikei0danshiFlutterの中華フォントを直すからリンク

コメント

hukusuke1007@hukusuke1007
リンクをコピー
このコメントを報告

kTypography の Flutter 2.2.0バージョンは以下のような形になりそうです。

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

const kLocale = Locale('ja', 'JP');

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;

final Typography kTypography = Typography.material2018(
  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(
    headline1: _textStyle(base.headline1),
    headline2: _textStyle(base.headline2),
    headline3: _textStyle(base.headline3),
    headline4: _textStyle(base.headline4),
    headline5: _textStyle(base.headline5),
    headline6: _textStyle(base.headline6),
    subtitle1: _textStyle(base.subtitle1),
    subtitle2: _textStyle(base.subtitle2),
    bodyText1: _textStyle(base.bodyText1),
    bodyText2: _textStyle(base.bodyText2),
    caption: _textStyle(base.caption),
    button: _textStyle(base.button),
    overline: _textStyle(base.overline),
  );
}
1
どのような問題がありますか？
あなたもコメントしてみませんか :)
ユーザー登録
すでにアカウントを持っている方はログイン
記事投稿イベント開催中
2022年に流行る技術予想
~
すべて見る
34
16
記事の改善
編集リクエストを送る
記事の情報
編集履歴編集リクエスト一覧LGTMしたユーザー一覧Markdown で本文を見る
問題がある記事を報告する
どのような問題がありますか？
ユーザー登録して、Qiitaをもっと便利に使ってみませんか

この機能を利用するにはログインする必要があります。ログインするとさらに下記の機能が使えます。

  1. ユーザーやタグのフォロー機能であなたにマッチした記事をお届け
  2. ストック機能で便利な情報を後から効率的に読み返せる
ユーザー登録ログイン
ストックするカテゴリー