概要
最近、Flutterを使う機会が出来ました。
まだ始めたばっかりで手探りで覚えている最中ですが、ここに自分用メモ残していこうと思います。
いやー、素晴らしいですねーこれ。未来を感じます。とても面白い。
利用しているバージョンは以下。
$ flutter --version Flutter 2.2.3 • channel stable • https://github.com/flutter/flutter.git Framework • revision f4abaa0735 (2 weeks ago) • 2021-07-01 12:46:11 -0700 Engine • revision 241c87ad80 Tools • Dart 2.13.4
んで、本題なのですが Flutter Web でそのまま起動すると レンダラ に CanvasKit が選択されています。
Webレンダラについての記載は以下。
CanvasKit は、Skia + WebAssembly を使うレンダラです。
パフォーマンスも良さそうなので、こっちを使いたいのですが一点問題があって
日本語部分が中華フォントになる
って点です。
例えば「起動」って文字が以下のように表示されます。
おしい。。。
ちなみに、起動時に以下のように html レンダラ を指定すればちゃんと表示されます
$ flutter run -d chrome --web-renderer html
てことで、CanvasKitの場合でもちゃんと表示できるように調整します。
フォントを埋め込みする
結果的にはフォントを埋め込んでしまうってことで回避できるみたいです。
私の場合は、Google Fonts さんから Noto Sans JP を持ってきました。
後は Flutter プロジェクトの下に assets/fonts というディレクトリ作って配置しておきます。
んで、pubspec.yaml にアセット登録しておきます。
flutter: uses-material-design: true fonts: - family: Noto Sans JP fonts: - asset: assets/fonts/NotoSansJP-Regular.otf
最後に、MaterialAppでテーマデータを設定している部分で fontFamily を設定
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter デモ',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blueGrey,
fontFamily: "Noto Sans JP",
),
home: MyHomePage(title: 'Flutter デモ ホームページ'),
);
}
再度起動してみる。
$ flutter run -d chrome --web-renderer canvaskit
ちゃんと表示されました。
参考情報
過去の記事については、以下のページからご参照下さい。
- いろいろ備忘録日記まとめ
サンプルコードは、以下の場所で公開しています。
- いろいろ備忘録日記サンプルソース置き場
