【Flutter】ランチャースクリーンの設定

Flutterを使用している場合のランチャースクリーンの設定方法についてです。

# android編
ディレクトリ`android/app/src/main/res/drawable/`に設定をしていきます。
![スクリーンショット 2020-10-25 18.34.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652378/7048515e-6652-81e0-29e3-9f9cd26e081d.png)

## ランチャー画像の保存
上記`drawable`ディレクトリ直下にランチャースクリーンに表示される画像を配置します。
この記事では`launcher.png`を配置したこととします。
![スクリーンショット 2020-10-25 19.09.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652378/be29ce89-db68-ff46-3fa2-f8f1229e6c8f.png)

## `launch_background.xml`の編集
`drawable`ディレクトリ直下に元からある`launch_background.xml`にランチャー画像設定を記述します。

```launch_background.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="?android:colorBackground" />

    <!-- You can insert your own image assets here -->
    <!-- <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/launch_image" />
    </item> -->
</layer-list>
```

上記が初期状態で、こちらに上記画像の設定を記述します。
`<item>`のコメントを解除して下記の通りに書き換えます。
`android:src="@mipmap/launch_image"`
↓
`android:src="@drawable/launcher"`

画像設定を記述したものが下記の通りになります。

```launch_background.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="?android:colorBackground" />

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/launcher" />
    </item>
</layer-list>
```

背景色設定に関しては`drawable`と同階層にある`values`ディレクトリの`colors.xml`を参照すると、`<color name="{カラー設定名称}">#212121</color>`というように記載されています。
※この記事内ではカラー設定名称を`bg_color_launcher*と置き換えて記述します。

そちらを`<item android:drawable="?android:colorBackground" />`に下記の通り、記述していきます。
`<item android:drawable="@color/bg_color_launcher" />`
`@color/bg_color_launcher`,`@drawable/launcher`はエディタ上では赤く表記されていると思いますが問題ないです。

最終的には下記の通りになっていると思います。


```launch_background.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/bg_color_launcher" />

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/launcher" />
    </item>
</layer-list>
```
こちらで設定完了です。エミュレータなどで確認してみてください。
アプリケーションの起動の際に設定した画像が表示されていれば完成です。

#iOS編
iosに関してXcodeで作業します。
`iOS`のディレクトリ上で右クリック`Flutter->Open iOS module in Xcode`を選択するとXcodeが起動します。
![スクリーンショット 2020-10-25 19.48.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652378/05c48ecb-a190-8ee7-796d-76abd3155bf3.png)

## 画像の登録 `Assets.xcassets`
ランチャー用の画像を登録します。`Runner/Assets.xcassets`を選択してください。するとlaunchImageを登録するUIが表示されます。
とりあえず、1x,2x,3xと表示されている上の四角の領域に画像をドラッグしてください。
![スクリーンショット 2020-10-25 19.57.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652378/e0922bd2-c73f-290a-63b1-ee6d41e2ed5f.png)
## 背景色の設定
背景色の設定に関しては`LaunchScreen.storyboard`->`view`を選択状態にして一番右のパレット内にある`Background`のセレクトボックスから設定することが可能です。
![スクリーンショット 2020-10-25 20.00.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652378/f9981989-162a-5a8d-1502-2b45f654a79d.png)

以上でiOSのエミュレータ等で確認してみてください。問題なく表示されると思います。

以上です。