教你快速為 Flutter 設置 Flavor、App Icon 和 Launcher splash — Part 2: flutter_launcher_icons

使用套件幫你生成 App Icon 就好了

這是教學文章的第二篇。在本文中，我們需要 flutter_launcher_icons 套件的幫助，透過自動化生成的方式，將每個尺寸、場景的 App Icon 設定完成。如果想查看本系列的其他文章，可以點擊下方提供的連結：

• Part 1: 使用 flutter_flavorizr 設置 Flavor
• Part 3: 使用 flutter_native_splash 設置 Launcher splash

flutter_launcher_icons

flutter_launcher_icons | Dart Package

安裝

dev_dependencies:
  flutter_launcher_icons: <latest-version>

配置

• 為每個環境新增一個 icon 的 yaml 配置檔案
• 在裡面新增 flutter_icons 設定

flutter_icons:
  android: true
  ios: true
  remove_alpha_ios: true
  image_path: "assets/images/logo2.png"

生成設定代碼

在 Terminal 輸入指令執行

// 生成每個環境
flutter pub run flutter_launcher_icons -f flutter_launcher_icons*

// 生成指定環境
flutter pub run flutter_launcher_icons -f flutter_launcher_icons-dev.yaml

iOS 目錄生成的 Icon 圖檔，以 AppIcon- 為前綴

因為 flutter_flavorizr 生成的資源目錄跟 flutter_launcher_icons 生成的目錄名稱不同，我們要調整一下每個環境對應的資源目錄名稱，才能正常存取到圖檔

Demo

Icon for every environment

休息一下

到這裡我們已經可以顯示每個環境的 App Icon，讓我們在手機上可以輕鬆辨識。最後還差一步，我們要完成啟動頁面才結束～

教你快速為 Flutter 設置 Flavor、App Icon 和 Launcher splash — Part 3: flutter_native_splash

• 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

謝謝你花費時間看完，非常感謝！

如果覺得文章不錯的話可以贊助，讓我有更多動力和熱情分享學習紀錄和生活！請我喝一杯咖啡吧～

https://www.buymeacoffee.com/yiichenhi

End

希望有幫助到你/妳，歡迎追蹤我，方便瀏覽最新的文章～