くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Flutter > Flutterで好きなアイコンを追加する(IconData/FlutterIcon)

Flutterで好きなアイコンを追加する(IconData/FlutterIcon)

Flutter

FlutterのIconで好きなアイコンを追加したいなと、
いろいろ調べてみたときの備忘録(*´ω｀*)　

IconDataはフォントらしく、フォントファイルを追加する必要があるっぽい。

Icon(Icons.copy);

// Icons.copyの中身

/// <i class="material-icons md-36">copy</i> &#x2014; material icon named "copy".
static const IconData copy = IconData(0xe190, fontFamily: 'MaterialIcons');

カスタムアイコンを用意する

カスタムアイコンを追加するのに必要なファイルを用意していくれる、
ジェネレータがあるのでそれを使うと便利。

Material Design IconやFont Awesomeなどから、
好きなアイコンを選んで、ttfとdartファイルを生成してくれる。

また、SVGファイルをアップロードすることもできるので、
オリジナルのアイコンも利用できる。

使い方

アイコンデータの生成

好きなアイコンを選んで、

dartファイルのクラス名になる名前を入力して、
(例: MyIcons)

ダウンロードボタンを押すと、

ファイルを生成してくれる。

ダウンロードしたzipを解凍すると、こんな感じ。

flutter-icons-c59624fc/
├── config.json         ... 再ダウンロード時に使う設定ファイル
├── fonts
│   └── MyIcons.ttf     ... フォントファイル
└── my_icons_icons.dart ... IconDataのクラス

config.jsonは、アイコンを増やしたいなと思ったときに、
同じ設定を復元するのに利用するファイル。

フォントファイルの配置

ダウンロードしたファイルを配置する。

MyIcons.ttfをassets/fonts/に配置して、
pubspec.yamlに設定を追加する。

# pubspec.yaml
flutter:
  fonts:
    - family: MyIcons
      fonts:
        - asset: assets/fonts/MyIcons.ttf

普通のフォントファイルを同じ感じ。好きな場所でOK。

dartファイルの配置

my_icons_icons.dartをlib/直下に配置。
これも好きな場所でOK

自動生成されてたファイルの中身はこんな感じ。

// lib/my_icons_icons.dart
import 'package:flutter/widgets.dart';

class MyIcons {
  MyIcons._();

  static const _kFontFam = 'MyIcons';
  static const String? _kFontPkg = null;

  static const IconData twitter =
      IconData(0xf099, fontFamily: _kFontFam, fontPackage: _kFontPkg);
}

カスタムアイコンを利用する

あとは、MyIconsをつかえばOK(*´ω｀*)

import './my_icons_icons.dart';
Icon(MyIcons.twitter, color: Color(0xFF1da1f2));

以上!! これでいろんなアイコンに対応できるようになる。。(*´ω｀*)

参考にしたサイトさま