花了許多功夫完成APP大部分的功能，最後要來為專案做一些包裝，畢竟有了裡子還要有面子，今天就來設定

• Launcher Icon，也就是App啟動圖示
• Splash Screen，剛進入app時，app還未完全載入的中轉頁面

完成之後會發現，我們這十來天土炮做出來的App，
就跟商店架上那些五星好評、排行榜第一的App已經沒什麼兩樣了！
（並沒有

好的，那我們就開始吧！

Launcher Icon

• 首先要來換一下launcher icon
  

  目前在模擬器上看到的是所有flutter app在開發模式時預設的圖像。我們當然不能這樣就直接上架，換一個有鑑別度的圖案才能讓別人好識別我們辛辛苦苦做出來的app。

1. 安裝套件Flutter Launcher Icons，加到dev_dependencies中

   $ flutter pub add flutter_launcher_icons --dev
   

2. 找一張大圖以利製成各式尺寸後不會失真，或者自己製作(這邊我是上unsplash尋找1920x1920的圖片)

3. 將圖片放到特定路徑:例如 assets/sun.jpg
   

4. 在pubspec.yaml的flutter_icons下方指定圖片位置、ios和android的設置

   # pubspec.yaml
   flutter_icons:
       android: "launcher_icon"
       ios: true
       image_path: "assets/sun.jpg"
       min_sdk_android: 21 # android min sdk min:16, default 21
   
   flutter:
       uses-material-design: true
   

   YAML檔案是很講究對齊的，手動輸入的話沒有好好控制縮排可是會報錯的喔～

5. 下指令執行套件內的程式腳本，flutter_launcher_icons就會自動重製圖片為對應的大小並放到對應的ios/android資料夾

   $ flutter pub get
   $ flutter pub run flutter_launcher_icons:main
   

   執行完畢後就會發現andoird/app/src/main/res下面各個解析度的mipmap資料夾和ios/Runner/Assets.xcassets/AppIcon.appiconset 都有大量的圖片更新，這些就是原本在原生開發時放不同解析度以適應各種裝置的launcher icon的地方，只是腳本一次幫我們放好了～

6. 將模擬器上的app移除並重新安裝(在terminal下指令flutter run 或start debugging都可以)，就會看到launcher icon被更新囉！

   

Splash Screen

• splash screen是啟動app時的畫面，通常到app初始化完畢就會消失。使用splash screen是為了填補「app開啟」到「第一個畫面載入之間」的空白，讓使用者在認知上和app更為一致、不會有突兀的感受。本次splash screen原生的部分也會透過腳本幫我們操作，我們只要專注在flutter內部頁面就好

1. 安裝套件 Flutter Native Splash

    $ flutter pub add flutter_native_splash
    $ flutter pub get
   

2. 設置splash screen所需的logo，這邊我們也可以用appicon.co自己將大圖裁切成小圖。將處理好的圖片放到指定的位置
   

3. 在pubspec.yaml和 flutter/flutter_icons 同一個層級的地方設置 flutter_native_splash：

   flutter_icons:
     android: 'launcher_icon'
     ios: true
     image_path: 'assets/sun.jpg'
     min_sdk_android: 21
   
   flutter_native_splash: #here
     color: '#000000'
     image: 'assets/moon.png' # 只能使用.png檔案喔！
   
   flutter:
     uses-material-design: true
   

4. 製作splash screen

   $ flutter pub run flutter_native_splash:create
   

5. 重新啟動app，就可以看到製作好的splash screen囉～有了這些套件真的比手動去改動原生的Android和iOS專案方便許多呢！

   

Recap

今天我們使用兩個工具

• flutter_launcher_icon製作app圖示
• flutter_native_splash製作splash screen

實作的部份至此結束，感謝收看！
明天開始進入打包上架的環節囉，先來看看有哪些重點提要吧～