Flutterで独自アイコンを使いたい – 開発日記(80)

SVGファイルの作成に苦戦 2024/03/12

ソフト内で使っている各種アイコンは、ネットで探したものをそのまま使っている。
アイコンはたとえば下記のようなサイトで見つけることができる。

• Icons class – material library – Dart API
• Material Symbols & Icons – Google Fonts
• FlutterIcon – Flutter custom icons generator
• Free Icons | Font Awesome

たださすがに汎用的なアイコンでは表現出来ないものもあり、一部のデザインを加工したくなった。しかしどうすれば良いか全く分からず色々調べた。

ひとまずアイコンの加工はSVGファイルをInkScapeで編集すればいけそうだ。

しかし出来たSVGファイルをIcon化するために FlutterIcon – Flutter custom icons generator へアップロードしたらエラー。画面に出ているガイダンスに従ってもダメ。

StackOverflowに似たような悩みがあった。
svg – Custom icon for flutter app show this error of convert to compound path manually – Stack Overflow

回答を見ているとなるほど。。。

It seems that https://www.fluttericon.com can only generate single path svg. If you have two paths (you need to have two paths to have a fill property) it won’t work.

訳： fluttericon.com では、単一パスの SVG しか生成できないようです。パスが 2 つある場合、機能しません。 (塗りつぶしプロパティを設定するにはパスが 2 つ必要)

こういった情報は本当に助かる。

そこでエラーの表示を見ながらsvgファイルの中身のstyle部分をテキストエディタで開き手動で消したら、エラー無しで通るようになった。

（もしくはこちらにアップロードすれば、余計なものを消してくれるようだ。https://jakearchibald.github.io/svgomg）

しかし今度はその編集したsvgファイルをサイトにアップロードしても、エラーこそ出なくなったが正しく表示されない。
SVGを手元で表示するのは問題ないのだが、FlutterIconを経由するとなぜか全てが透明になったり意図しない状態になってしてしまう。謎だ……

やり方を変えて解決 2024/03/13

アイコン問題は引き続き苦戦

https://www.fluttericon.com/ から落としたアイコンをフォントとして組み込んでIdea Lane上で表示すること自体は出来る。
しかしカスタムしたアイコンは、なぜか透明になったり表示がおかしくなる。（下記はアイコンの一部が巨大化した謎の状態）

ここまでそれなりに時間をかけたが、やり方を変えよう……。
iconファイルに無理に変換せず、svgのまま表示したらどうだろうか。

flutter_svg というパッケージを使ってみたら、普通に表示できた。
拍子抜けするほど簡単だ。ひとまずこれで目的は果たせる。

気になるのはパフォーマンスだが、 説明に Precompiling and Optimizing SVGs (SVG のプリコンパイルと最適化) というセクションもあるし、そもそもファイルサイズも小さいので、まあ実用的には大丈夫だろう。

絵柄の調整は引き続き必要だが、とにかく独自アイコンが表示出来た。

その後もいくつかアイコンのパターンを作ってみた。

アイディアの新規作成ボタンだけでも、「下に作る」「子アイディアとして作る」「上に作る」の３パターンが必要で、表現は悩ましいところだ。
いろんなパターンを作ってみたうえで、さてどれが良いかというと意外と難しい。

その他行った修正

• CheckBoxモードがONのアイディアの下側にアイディアを作成した場合、CheckBoxモードを引き継ぐように改善。
• キャンバスのコピー機能の実装に着手。まだリレーション周りの対応が必要。

---

※開発日記は当時の記録をもとに作成し、必要に応じて加筆・補足しています

---