iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 30
3
Mobile Development

Flutter---Google推出的跨平台框架,Android、iOS一起搞定系列 第 30

【Flutter基礎概念與實作】 Day30–完賽啦~ 輸出Release APK吧

  • 分享至 

  • xImage
  •  

Finally!!! 來到了鐵人賽的最後一天,今天要介紹的是寫App最後也是最重要的一個步驟---輸出Release APK。

添加App Icon

雖然Flutter預設的Icon並不算醜,但用預設的總是有種陽春感,所以在輸出前先來建立專屬於你自己的Icon吧。

Dart Pub上面有一個能迅速幫你產生Andorid和iOS Icon的套件「flutter_launcher_icons」,只需要三個簡單的步驟,它就會分別在Andorid和iOS的資料夾產生適合各種大小使用的Icon圖示。

  1. 在pubspec.yaml的dev_dependencies區塊引入flutter_launcher_icons package
dev_dependencies:
	  flutter_launcher_icons: ^0.7.3
  1. 將你的Icon圖放到assets資料夾後,在pubspec.yaml添加以下程式碼指向圖片路徑、設定檔案名稱等等
flutter_icons:
  image_path: "assets/icons/ic_launcher.png"
  android: true # can specify file name here e.g. "ic_launcher"
  ios: true # can specify file name here e.g. "My-Launcher-Icon"
  1. 在command line輸入下方程式碼,剩下的就交由套件幫我們完成
flutter pub get
flutter pub run flutter_launcher_icons:main

執行完後可以在Android資料夾看見產生出了許多不同大小的Icon,

在android/app/src/main/AndroidManifest.xml中的 android:icon="@mipmap/ic_launcher">也會自動更改成你設定的檔案名稱。

建立keyStore

有兩種方式可以產生keyStore

  • 第一種:使用Android Studio GUI介面產生

這種方式簡單但麻煩,因為你需要先建立一個空的Android專案,然後依照下方的示意圖建立keyStore。

  1. 從上方工具列選擇Build -> Generate Signed Bundle/APK
  2. 選擇APK
  3. 點選Create new...,建造KeyStore
  4. 設定你的keyStore檔案存放位置並設定alias的密碼
  • 第二種:透過command line指令建造KeyStore

到「C:\Program Files\Java\jdk1.8.0_181\bin」(路徑可能依你當初安裝的設定有異),開啟cmd或Power Shell輸入下方指令,keyStore的存放路徑可以自己設定。

keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key

新增key.properties

回到專案,在android資料夾下新增「key.properties」,用來存放你剛剛新增的keyStroe檔案位置和密碼。

設定Proguard Rule

使用Proguard是為了保護你的程式碼不易被竊取,它能對程式碼做混淆和優化,即使惡意人士反組譯你的apk,也很難看懂程式碼的運作流程。

在android/app資料夾新增「proguard-rules.pro」用來設定Proguard的規則。

## Flutter wrapper
-keep class io.flutter.app.** { *; }
-keep class io.flutter.plugin.**  { *; }
-keep class io.flutter.util.**  { *; }
-keep class io.flutter.view.**  { *; }
-keep class io.flutter.**  { *; }
-keep class io.flutter.plugins.**  { *; }
-dontwarn io.flutter.embedding.**

設定app層級的build.gradle

開啟android/app/build.gradle

找到

android {
    compileSdkVersion 28
	...

在它上面加三行程式碼,載入剛剛的key.properties

def keystorePropertiesFile = rootProject.file("key.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))

android {
    compileSdkVersion 28

找到

buildTypes {
	release{
		....
	}
}

修改成以下程式碼,開啟Proguard功能以及設定簽章用的keyStore資訊。

    signingConfigs {
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile file(keystoreProperties['storeFile'])
            storePassword keystoreProperties['storePassword']
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
            minifyEnabled false
            useProguard true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }

輸出Release APK

在terminal輸入flutter build apk就完成囉。
輸出的apk可以在「專案資料夾\build\app\outputs\apk\release」找到。

設定Firebase驗證指紋

你會發現當安裝APK後,卻無法使用Google帳號登入,這是因為Day10只有在Firebase填上debug keyStore的驗證指紋,而剛剛產生的release keyStore指紋還沒有輸入。

取得憑證SHA-1步驟:

a. 使用cmd或PowerShell到C:\Program Files\Java\jdk1.8.0_181\bin路徑

b. 輸入keytool -exportcert -list -v -alias <alias名稱> -keystore <keyStore檔案路徑>

c. 輸入金鑰密碼

接下來只要在Firebase App設定的地方新增你的SHA1就可以啦。

完賽心得

這是我第一次參加鐵人賽,很感動竟然能撐到完賽(多虧有實驗室同學互相督促),參賽前不知道原來一篇文章需要花這麼多心力和時間才能完成,平均一篇可能要4、5個小時來寫。

可惜的是自己的文筆太差,加上事前沒有針對每天的內容作完整規劃,使得後半段內容顯得有點凌亂,不過還是感謝願意點進來看我文章的各位,希望我寫的內容對剛接觸Flutter的人有些微的幫助。

最後附上FlutTube Github網址,如果有遇到任何問題歡迎寄信聯絡我,可以一起討論。


上一篇
【Flutter基礎概念與實作】 Day29–Profile Mode檢測App效能
系列文
Flutter---Google推出的跨平台框架,Android、iOS一起搞定30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

2
thomasko
iT邦新手 5 級 ‧ 2019-11-28 01:52:16

很棒的經驗分享!

0
阿展展展
iT邦好手 1 級 ‧ 2019-11-29 06:34:51

恭喜完賽!!/images/emoticon/emoticon64.gif

我要留言

立即登入留言