👻

【Flutter】アイコン作成

2022/03/20に公開

Flutter

tech

概要

AppleStore(IOS)用とGooglePlay(Android)用のアイコンを作成します。
以下パッケージを使用して、設定は自動で行います。

IOSアイコンのサイズ

必要となってくる一番大きなサイズを1枚作成しましょう。
App Store公開用のサイズが1024×1024pxなので、今回はこれに合わせて行きます。
注意点としては透過画像を許容していないため、アルファ値の設定を変える必要があります。

Androidアイコンのサイズ

Androidはアダプティブアイコンという手法を採用しています。
作成したアイコンに対して、上からマスクを被せるようなイメージになるため、
範囲いっぱいにコンテンツを作成すると欠けが発生してしまいます。

~~作成するサイズは一番大きな"xxxhdpi"のサイズ432×432pxのサイズで作成しましょう。~~
追記：GooglePlay提出用に512×512pxのサイズが必要になるのでそちらで作成しましょう。

アイコンの作成

以下、2枚のアイコン画像を作成します。

OS	幅	備考
IOS	1024×1024px	なし
Android	512×512px	コンテンツの幅は直径312pxの円の範囲で作成

今回は以下フリーのブラウザツールを使用します。
https://pixlr.com/jp/x/

IOSアイコンの作成

新規作成から、1024×1024pxのサイズで画像を作成しましょう。
編集が完了したら、PNGで保存をします。

作成したファイルを開いて、「ファイル > 書き出す...」からアルファ値のチェックを外して保存を押します。

Androidアイコンの作成

新規作成から、512×512pxのサイズで画像を作成しましょう。
※作成したIOSアイコンの編集画面にて、レイアウトテンプレートからページをリサイズをするのが一番簡単です。

アダプティブアイコンを作成するために、コンテンツをマスクの範囲内で収まるようにガイド線を作成します。
レイヤーの追加から"形"を選択し、以下スクショを参考に円の中央配置します。
あとは、円に収まるようにコンテンツを配置し、編集が完了したらPNGで保存をします。

flutter_launcher_iconsの使用

プロジェクトフォルダに作成した画像を配置しましょう。
今回はassetsフォルダを作成し、そこに配置を行います。

pubspec.yamlの編集

dependenciesにパッケージの記載をし、flutter_iconsのセクションを追加します。
"adaptive_icon_background"にはマスクの色を設定します。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_launcher_icons: ^0.9.2
  
flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon_ios.png"
  adaptive_icon_foreground: "assets/icon_android.png"
  adaptive_icon_background: "#46B4EB"

アイコンの自動生成

以下コマンドを順番に実行

 flutter pub get
 flutter pub run flutter_launcher_icons:main

概要