1. App的靈魂：icon

我個人覺得icon是一個專案很重要的部分
就像Avatar一樣
是一個第一印象
是你識別他很重要的來源
所以我只要開了新的專案
第一件事一定是幫他換上新的Icon

在Flutter專案裡面
會有iOS跟Android的原生資料夾

打開之後你可以看到以前常見的那些老朋友

iOS icon路徑

Android icon路徑

最後可以達到同一個專案不同icon不同名稱

補充：修改Android名稱的地方
(其他設定如id、版號等，可以參考iOS Developer Learning Android. Lesson 03)

然後Kotlin終於有專屬資料夾了~~~~~

Kotlin重出江湖

2. App的內在美：Launch頁

如果說icon是App的靈魂
那麼Launch頁就是App的內在美(因為要打開App才看得到)
一個好的Launch頁可以給user更好的體驗、加深品牌形象、甚至可以拿來行銷

iOS

用Xcode開啟iOS專案(Runner)
可以發現到Flutter已經幫我們建好一個LaunchImage了(需要注意imageset裡面是有一張1px的圖)

但它其實是LaunchScreen.storyboard上的一張圖
所以其實還是用storyboard當啟動頁

不過我發現圖片在顯示部分有延遲的現象
我在相同環境相同圖片的狀況下用Xcode開新專案不會重現
應該是Flutter造成的⚠️⚠️⚠️
可能要再研究一下怎麼解決

Android

分為：

• launch screens(啟動頁)：等待Android初始化
• splash screens(閃屏頁)：等待Dart初始化

launch

又分成 LaunchTheme 跟 NormalTheme

這張圖有點花(我當初也是看了好久才看懂@@)，逐一說明如下：

1. 先說明顏色的意義
   1. 綠色：檔案
   2. 藍色：有哪些主題
   3. 橘色：該主題的UI設定
   4. 紫色：特別說明
2. 這張圖是style.xml (第二個綠色的xml)
3. 裡面有兩個主題就是 launch 跟 normal
   根據官方說明，主要需要設定的是launch，normal只會顯示很短的時間(我自己實測也是看不出來)，建議設定跟主要背景颜色相似的纯色(如圖就直接指定為一個顏色)
4. launch可以看到是設定為launch_background，對應到第一個綠色的xml，可以在該xml自由layout或放圖(想成LaunchScreen.storyboard就對了☘️☘️☘️, 但他是drawable, 能做的事比較少)
5. 右邊的紫色報錯是因為現在是在Flutter專案裡，他看不懂Android= =，可以不用管他
6. 如果想要他看懂可以點上面的紫色圈圈進入Andorid模式
7. 然後Android提供的顏色竟然沒有blue或green= =，若想知道有什麼可以選請，進入Andorid模式

splash

可以透過Drawable實現
就是在AndroidManifest.xml裡
將io.flutter.embedding.android.SplashScreenDrawable的resource改掉

最後可以看到紫色的就是launch藍色的就是splash

參考連結

向 Android 应用中添加闪屏页和启动页

本集內容Android版請見：iOS Developer Learning Android. Lesson 03

下集預告：畫面跳轉

最後提供一下github.com/mark33699/IDLF