Flutterのネイティブ側からマテリアル・アイコンを使う

Flutter のアプリで使う画像などのリソースファイルがあります。

マテリアル・アイコンを有効にしている場合、これはフォントとしてFlutterアプリのアセットに含まれており、Flutterから使えるのは当然ですが、プラグインなどの Android / iOS 側のコードからも使うことができます。

Flutter

Flutterでマテリアル・フォントを使う場合は pubspec.yaml で以下のように設定します。おそらくデフォルトで有効になっていると思います。

flutter:
  uses-material-design: true

Android

AssetManager を経由して、Flutter側のアセットへアクセスできます。

Typeface typeface = Typeface.createFromAsset(
        getAssets(), "flutter_assets/fonts/MaterialIcons-Regular.ttf");

TextView yourText = (TextView) findViewById(R.id.your_material_icon);
yourText.text = "\uE15E";
yourText.setTypeface(typeface);

iOS

iOSでは、Xcodeのプロジェクトで、以下の位置にアセットファイルが追加されています。

- Runner
  - Flutter
    - flutter_assets
      - fonts
        - MaterialIcons-Regular.ttf

続いて、プロジェクトの設定 > info > Fonts provided by application に、このフォントを設定します。

あとは、UIFontを以下のように作り、UILabelなどに設定すればOKです。

let icon: UILabel = UILabel()
icon.text = String(UnicodeScalar(0xe3c9))
icon.font = UIFont(name: "Material Icons", size: size)

まとめ

Flutterのアセットは flutter_assets の下にすべて配置されています。

もちろん、マテリアル・フォント以外の、自分たちで追加したアセットも使うことができます。

この記事はQiitaの記事をエクスポートしたものです