iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
1
Mobile Development

iOS Developer Learning Flutter系列 第 3

iOS Developer Learning Flutter. Lesson2 第一印象

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


上一篇
iOS Developer Learning Flutter. Lesson1 依然哈囉
下一篇
iOS Developer Learning Flutter. Lesson3 頁面跳轉
系列文
iOS Developer Learning Flutter30

尚未有邦友留言

立即登入留言