教你快速為 Flutter 設置 Flavor、App Icon 和 Launcher splash — Part 1: `flutter_flavorizr`

Yii Chen

Follow

Published in

Flutter Formosa

8 min readMar 16, 2023

--

不用再煩惱 Flavor 了

本文展示如何為專案新增多個環境，也就是大家多多少少會聽到的 Flavor，多環境的配置可能提供給工程師開發用的、QA測試用的還有正式給使用者用的，每個環境擁有不一樣的資料或情境，這時候就能透過 Flavor 去配置和管理。

我們會使用 flutter_flavorizr、flutter_launcher_icons、flutter_native_splash 這三個套件，透過 Codegen 自動化的方式快速產生檔案與設定，大大節省以前手動操作的時間，應該把時間投入在開發階段，你說對吧？

如果想查看本系列的其他文章，可以點擊下方提供的連結：

flutter_flavorizr | Flutter Package

A flutter utility to easily create flavors in your flutter application If you want to support this project, Let's start…

pub.dev

首先需要用到 flutter_flavorizr，它主要幫我們建置好 Android 和 iOS 環境的設定，我們只需要把個環境的參數配置準備好就好囉

安裝

dev_dependencies:
  flutter_flavorizr: <latest-version>dada

配置

在 pubspec.yaml 檔案裡新增 flavorizr 設定

設置 dev 和 prod 兩個環境
每個環境可自定義 App 的顯示名稱
設置 Android 和 iOS 的專案ID，applicationId 和 bundleId

flavorizr:
  flavors:
    dev:
      app:
        name: "Flavor(Dev)"

      android:
        applicationId: "com.example.flavor.dev"
      ios:
        bundleId: "com.example.flavor.dev"

    prod:
      app:
        name: "Flavor"

      android:
        applicationId: "com.example.flavor"
      ios:
        bundleId: "com.example.flavor"

針對雙平台設置專案的環境變數

android:
 applicationId: "com.example.flavor.dev"
 resValues:
   variable_one:
     type: "string"
     value: "variable 1"
   variable_two:
     type: "string"
     value: "variable 2"

ios:
 bundleId: "com.example.flavor.dev"
 variables:
   VARIABLE_ONE:
     value: "variable 1"
   VARIABLE_TWO:
     target: "variable 2"
     value: "variable 2"

支援 Firebase 設定檔，不同環境走不同的設定

android:
 applicationId: "com.example.flavor.dev"
 firebase:
   config: "dev/google-services.json"
ios:
 bundleId: "com.example.flavor.dev"
 firebase:
   config: "dev/GoogleService-Info.plist"

生成設定代碼

在 Terminal 輸入指令執行

flutter pub run flutter_flavorizr

Android 目錄生成的檔案，App Icon、Splash 相關檔案，可以暫時不用管，後面會透過其他套件來更新圖檔，這裡要確保的是個別環境有建立成功

再生成之後再手動指定每個 Flavor 要運行的 main 檔案

// dev
flutter.target "lib/main_dev.dart"

// prod
flutter.target "lib/main_prod.dart"

iOS 目錄生成的檔案，App Icon、Splash(LaunchImage) 相關檔案，可以先將目錄都刪除，因為後續其他套件產生的檔案、目錄名稱，它們規則都不同

Flutter 專案生成的檔案

App 運行入口多了 main_dev.dart 和 main_prod.dart，後綴字根據自定義的 flavor 名稱
另外 flavors.dart 紀錄目前運行的環境與相關資訊，讓我們在開發時方便使用，可以根據需求決定是否要保留

Flutter 運行指定環境

flutter run --flavor dev -t lib/main_dev.dart
flutter run --flavor prod -t lib/main_prod.dart

創建 Android, iOS 安裝檔

// Android
flutter build apk --flavor dev -t lib/main_dev.dart

// iOS
flutter build ipa --flavor dev -t lib/main_dev.dart

注意

如果之後有新的 flavor 環境需要添加的話，生成後原有的環境相關檔案都會被覆蓋以及更新，目錄也都會跟著改變，這時候可能需要將不必要的新檔案刪掉和復原，否則可能會影響原有的環境設定

休息一下

當環境都準備好後就要開始添加最重要的 App Icon 了

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

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

medium.com

About

GitHub： chyiiiiiiiiiiii
Instagram： flutterluvr.yii
Linkedin： yiichenhi
Youtube： Yii
Youtube：一起饅頭(美食頻道)
Email： ab20803@gmail.com

Contribution

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

https://www.buymeacoffee.com/yiichenhi

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

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