iOS・Android兼用Appアイコンを作成する (Flutter)

# はじめに
```Flutter```でiOS / Android両対応アプリを作成した時に、```AppIcon```の作成に一番時間を取られたので作業ノウハウをまとめました。

## どこに時間を取られたのか？
**iOS**
1024 x 1024 px[^1]の画像を用意すれば良いです。


**Android**
```Android 8```から導入された```Adaptive Icon```[^2]によって、画像中央の直径```66 dp```の```セーフゾーン```を残して周囲が切り取られる場合があるので、予め構図を考えておかないと意図しないアイコン表示になってしまいます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/41bbb16b-f830-4a6d-b86e-4a902977cf00.png" width=200>
<br>

:weary:
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/b6e13619-fdd1-ed47-8d41-b3697709678d.png" width=200>

せっかく```Flutter```を使うんですから、```AppIcon```もiOSとAndroidで１つにまとめたいですよね？:blush:


# 作業手順
アイコン作成のツールは```Photoshop```を使いました。


## Step 1
**1**
```1024 x 1024 px```の新規画像を作成します。
```アートボード``` > ```アイコン 1024```でもOKです。
**2**
中央に直径```626 px```のセーフゾーンを設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/156a104d-02dc-f3e7-1651-2bc545ea2712.png" width=200>



### セーフゾーンの設定
セーフゾーンはチャンネルに追加しました。
**1**
楕円形選択ツール > 固定 > 626 x 626 px
![1-1-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/89ab7773-feae-ed8d-1f4c-fc599ac77fcd.png)
**2**
チャンネル > 選択範囲をチャンネルとして保存
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/eabe9c3a-ccc4-0ed1-f8b0-0c9d88dc4c24.png" width=240>
　　　　　　↓
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/b5ba7679-1bdb-9288-ea66-f881ebae7144.png" width=200>

## Step 2
アイコン画像を読み込みます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/0268b606-45c6-1117-c93f-f364533ace52.png" width=200>



## Step 3
セーフゾーン内にうまく収まるように構図を調整します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/ae954a84-05ff-6ccc-d350-3b09a61e4948.png" width=200>


## Step 4
空白部分に描き足しをします。:writing_hand:
AIにお任せすれば、お絵描きのテクニックはそんなに必要ないです。:yum:
| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/38a7aeae-e219-3188-a2cb-5b2d400a9efb.png" width=200> | → | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/df0a0454-9901-190b-6116-e6ff4babf8ec.png" width=200> 
|:--:|:--:|:--:|




## Step 5
完成　:tada:
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/40bcecda-d951-72ce-c723-028c34cfb6ed.png" width=200>


# Flutter (Android Studio)上の作業
## 前提条件
* [flutter_launcher_icons](https://pub.dev/packages/flutter_launcher_icons) がインストール済みであること。
## 設定
ディレクトリ構成
```
assets
└── images
    └── 2588_1024.png  # 作成したAppIcon
```
pubspec.yaml の設定
``` yaml:pubspec.yaml
flutter_icons:
  android: true
  ios: true
  image_path: 'assets/images/2588_1024.png' # iOS and less than Android 8
  adaptive_icon_background: '#ffffff'
  adaptive_icon_foreground: 'assets/images/2588_1024.png'  # Android 8
```
## アイコンの生成
Terminalで以下のコマンドを実行する。
```
＞ flutter pub run flutter_launcher_icons:main
・・・
✓ Successfully generated launcher icons  ← これが表示されたら成功!
```

## 結果
いい感じ :sunglasses::thumbsup:
| iOS | Android |
|:--:|:--:|
| <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/143c8c47-1f47-610b-fb6b-bcba852cbd40.png" width=200> | <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95033/95b9aebc-8717-388a-6fc0-eea848c101b3.png" width=180> |

iOSとAndroidで別々のAppIconを用意しなくても大丈夫になりました。




# 開発環境
* Adobe Photoshop 23.5.1
* Android Studio Dolphin | 2021.3.1 Patch 1
* Flutter 3.3.4
* flutter_launcher_icons 0.10.0


[^1]:[Xcode14~時代のAppアイコン](https://qiita.com/Hackenbacker/items/ff0499c00eac34d024bc)
[^2]:[Designing Adaptive Icons](https://medium.com/google-design/designing-adaptive-icons-515af294c783)