教你快速為 Flutter 設置 Flavor、App Icon 和 Launcher splash — Part 3: flutter_native_splash
設定啟動畫面會很麻煩嗎?
這是教學文章的第三篇。在本文中,透過 flutter_native_splash 套件產生啟動畫面所需的圖檔,並針對 Android 12 進行進階設定,一樣使用自動化生成,協助我們完成任務。如果想查看本系列的其他文章,可以點擊下方提供的連結:
flutter_native_splash
針對 Splash 套件可以進行很多細部設定,這邊以最簡單快速的方式設定初始啟動圖片
安裝
dependencies:
flutter_native_splash: <latest-version>
配置
在根目錄新增一個 flutter_native_splash.yaml 檔案,這邊讓每個環境的初始心面都相同,所以沒有做切分
在官方教學裡有給予 Android 12 需要的圖片尺寸,分別是啟動畫面的 Logo 圖檔是否有底色,都有告知我們需要哪種對應的大小,例如:如果是Logo配透明底色,圖檔的尺寸為 960 * 960,Logo也需要在圖中的範圍內,不能過大
以下是我提供的範例圖檔
如果需要依照 flavor 環境設定個別的啟動畫面,可以在根目錄新增個別檔案
flutter_native_splash-dev.yaml
flutter_native_splash-prod.yaml
生成設定代碼
// 針對預設 splash 設定檔生成
flutter pub run flutter_native_splash:create
// 針對指定環境生成
flutter pub run flutter_native_splash:create --flavor dev
Android 目錄生成的檔案,在 res 資源目錄裡面,為每個尺寸都創建一個圖檔,所以會有很多 drawable 目錄
iOS 目錄生成的 LaunchImage 圖檔
實際開發
可決定 Splash 啟動畫面的顯示時間。通常當 Flutter 繪製第一幀後,啟動畫面就會消失。但可以使用 preserve()
和 remove()
控制顯示的時長,保持螢幕上的啟動畫面。我們開發時都會在 main()
進行物件和服務的初始化,這時候就可以保持狀態,等待完成後再讓啟動畫面消失。
官方提醒:如果沒有使用到 preserve()
和 remove()
方法,可以將 flutter_native_splash 套件依賴放在 dev_dependencies 匯入
Demo
最後
恭喜你,完成多環境的設定很簡單吧,其實這些套件的文檔都寫得很完整,大家慢慢看過後應該都能設定好,只是難免過程中會遇到些許小問題,這邊幫你試完了,透過這三個套件幫我們節省很多時間,接下來可以專注開發功能囉!
- Flutter CICD 使用 Gitlab Runner 和 App Center 實作 part.1
- 使用 CodeMagic 和 Firebase 實現 Flutter CICD
- 輕鬆完成Flutter開發環境,最新版!
- 實作Flutter多變有趣的滾動效果CustomScrollView!
- 如何在Flutter使用 Makefile 節省你的時間?
- Easily understand StatefulWidget LifeCycle of Flutter
- “freezed” makes model class strong and easily
- 提高Flutter性能的小技巧!(一)
- 提高Flutter性能的小技巧!(二)
- 提高Flutter性能的小技巧!(三)
- What are Async and Isolates in Flutter?
- LoadBalancer is optimization for Isolates in Flutter
- Riverpod 輕鬆學,原來這麼好用!
- Riverpod 輕鬆學(二),一些進階用法!
About
- GitHub: chyiiiiiiiiiiii
- Instagram: flutterluvr.yii
- Linkedin: yiichenhi
- Youtube: Yii
- Youtube: 一起饅頭(美食頻道)
- Email: ab20803@gmail.com
Contribution
謝謝你花費時間看完,非常感謝!
如果覺得文章不錯的話可以贊助,讓我有更多動力和熱情分享學習紀錄和生活!請我喝一杯咖啡吧~
End
希望有幫助到你/妳,歡迎追蹤我,方便瀏覽最新的文章~