強大的Flutter App升級功能

注意：無特殊說明，Flutter版本及Dart版本以下：

• Flutter版本： 1.12.13+hotfix.5
• Dart版本： 2.7.0

應用程序升級功能是App的基礎功能之一，若是沒有此功能會形成用戶沒法升級，應用程序的bug或者新功能老用戶沒法觸達，甚至損失這部分用戶。

對於應用程序升級功能的重要性就無需贅言了，下面介紹下應用程序升級功能的幾種方式，從平臺方面來講：

• IOS平臺，應用程序升級功能只能經過跳轉到app store進行升級。
• Android平臺，既能夠經過跳轉到應用市場進行升級，也能夠下載apk包升級。

從強制性來講能夠分別強制升級和非強制升級：

• 強制升級：就是用戶必須升級才能繼續使用App，若是不是很是必要不建議使用如此強硬的方式，會形成用戶的反感。
• 非強制升級就是容許用戶點擊「取消」，繼續使用App。

下面分別介紹IOS和Android升級流程。

IOS升級流程

IOS升級流程以下：

流程說明：

1. 一般咱們會訪問後臺接口獲取是否有新的版本，若是有新的版本則彈出提示框，判斷當前版本是否爲「強制升級」，若是是則只提供用戶一個「升級」的按鈕，不然提供用戶「升級」和「取消」按鈕。
2. 彈出提示框後用戶選擇是否升級，若是選擇「取消」，提示框消失，若是選擇「升級」，跳轉到app store進行升級。

Android 升級流程

相比ios的升級過程，Android就稍顯複雜了，流程圖以下：

流程說明：

1. 訪問後臺接口獲取是否有新的版本，這裏和IOS是同樣的，有則彈出升級提示框，判斷當前版本是否爲「強制升級」，若是是則只提供用戶一個「升級」的按鈕，不然提供用戶「升級」和「取消」按鈕。
2. 彈出提示框後有用戶選擇是否升級，若是選擇「取消」，提示框消失，若是選擇「升級」，判斷是跳轉到應用市場進行升級仍是經過下載apk升級。
3. 若是下載apk升級，則開始下載apk，下載完成後跳轉到apk安裝引導界面。
4. 若是跳轉到應用市場升級，判斷是否指定了應用市場，好比只在華爲應用市場上架了，那麼此時須要指定跳轉到華爲應用市場，即便你在不少應用市場都上架了，也應該根據用戶手機安裝的應用市場指定一個應用市場，讓用戶選擇應用市場不是一個好的體驗，並且用戶也不知道應該去哪一個市場更新，若是用戶選擇了一個你沒有上架的應用市場，那就更尷尬了。
5. 指定應用市場後直接跳轉到指定的應用市場的更新界面。

介紹完了升級流程，主角終於出場了。

App升級功能使用介紹

只需在主頁的initState方法中調用升級檢測方法：

@override
  void initState() {
    AppUpgrade.appUpgrade(
      context,
      _checkAppInfo(),
      iosAppId: 'id88888888',
    );
    super.initState();
  }

_checkAppInfo方法訪問後臺接口獲取是否有新的版本的信息，返回Future<AppUpgradeInfo> 類型，AppUpgradeInfo包含title、升級內容、apk下載url、是否強制升級等版本信息。

iosAppId參數用於跳轉到app store。

_checkAppInfo()方法一般是訪問後臺接口，這裏直接返回新版本信息，代碼以下：

Future<AppUpgradeInfo> _checkAppInfo() {
  return Future.value(AppUpgradeInfo(
    title: '新版本V1.1.1',
    contents: [
      '一、支持立體聲藍牙耳機，同時改善配對性能',
      '二、提供屏幕虛擬鍵盤',
      '三、更簡潔更流暢，使用起來更快',
      '四、修復一些軟件在使用時自動退出bug',
      '五、新增長了分類查看功能'
    ],
    apkDownloadUrl: '',
    force: false,
  ));

好了，基本的升級功能就完成了，彈出提示框的效果以下：

點擊「之後再說」，提示框消失，點擊「當即體驗」，自動區分不一樣平臺。

訪問後臺接口獲取新版本的信息通常須要當前App的包名和版本，查詢方法以下：

await FlutterUpgrade.appInfo

返回的類型是AppInfo：

• versionName：版本號，好比1.0.0。
• versionCode：Android獨有版本號，對應Android build.gradle中的versionCode，ios返回「0」。
• packageName：包名，對應Android build.gradle中的applicationId，ios的BundleIdentifier。

iOS平臺升級

iOS平臺直接跳轉到app store相關頁面，iosAppId必定要設置對，不然app store會找不到應用程序。

Android平臺下載apk

Android平臺則會判斷是否設置了apk下載url，若是設置了則下載apk則直接下載，效果以下：

當下載完成時直接跳轉到apk安裝引導界面，效果以下：

用戶點擊容許，出現以下界面：

點擊繼續安裝便可，上面的安裝引導界面是系統界面，不一樣的手機或者不一樣的Android版本會略有不一樣。

Android平臺跳轉應用市場

若是不提供apk下載地址，點擊「當即體驗」，則會跳轉到應用市場，不指定應用市場則會彈出提示框，讓用戶選擇應用市場，效果以下：

提示框內將會包含手機內安裝的全部的應用市場，用戶選擇一個而後跳轉到對應應用市場的詳情界面，若是當前應用未在此市場上架則會出現「找不到的界面」。

一般狀況下會指定應用市場，這就須要知道用戶手機內安裝的應用市場，查詢方法以下：

_getInstallMarket() async {
  List<String> marketList = await FlutterUpgrade.getInstallMarket();
}

插件內置了國內經常使用的應用市場，包括小米、魅族、vivo、oppo、華爲、zte、360助手、應用寶、pp助手、豌豆莢，若是你須要檢測其餘的應用市場，好比google play，只需添加googl play的包名便可：

_getInstallMarket() async {
  List<String> marketList = await FlutterUpgrade.getInstallMarket(marketPackageNames: ['google play 包名']);
}

方法返回手機安裝的應用市場，根據安裝的應用市場指定跳轉應用市場，若是你要指定內置的應用市場，能夠根據包名獲取內置的應用市場的相關信息：

AppMarketInfo _marketInfo = AppMarket.getBuildInMarket(packageName);

指定華爲應用市場：

AppUpgrade.appUpgrade(
  context,
  _checkAppInfo(),
  iosAppId: 'id88888888',
  appMarketInfo: AppMarket.huaWei
);

指定沒有內置的應用市場方法以下：

AppUpgrade.appUpgrade(
  context,
  _checkAppInfo(),
  iosAppId: 'id88888888',
  appMarketInfo: AppMarketInfo(
    '應用市場名稱（選填）','應用市場包名','應用市場類名'
  ),
);

提示框樣式定製

若是默認的升級提示框不知足你的需求，那麼你能夠定製你的升級提示框。

title及升級內容文字樣式設置：

AppUpgrade.appUpgrade(context, _checkAppInfo(),
    titleStyle: TextStyle(fontSize: 30),
    contentStyle: TextStyle(fontSize: 18),
    ...
)

經過titleStyle和contentStyle設置其樣式，能夠設置字體大小、顏色、粗體等。

設置「取消」和「升級按鈕」文本和樣式：

AppUpgrade.appUpgrade(context, _checkAppInfo(),
    cancelText: '之後再說',
    cancelTextStyle: TextStyle(color: Colors.grey),
    okText: '立刻升級',
    okTextStyle: TextStyle(color: Colors.red),
    ...
)

默認「取消」按鈕文本是"之後再說"，默認「升級」按鈕的文本是「當即體驗」。

設置「升級」按鈕的背景顏色，須要2種顏色，2種顏色左到右線性漸變，若是想設置純色，只需將2種顏色設置爲同一個顏色便可，默認顏色是系統的primaryColor:

AppUpgrade.appUpgrade(context, _checkAppInfo(),
    okBackgroundColors: [Colors.blue, Colors.lightBlue],
    ...
)

設置進度條的顏色：

AppUpgrade.appUpgrade(context, _checkAppInfo(),
    progressBarColor: Colors.lightBlue.withOpacity(.4),
    ...
)

設置升級提示框的圓角半徑，默認是20：

AppUpgrade.appUpgrade(context, _checkAppInfo(),
    borderRadius: 15,
    ...
)

因爲環境的緣由，目前源代碼還沒法發佈到github及pub上，後續會開源，固然也能夠關注個人公衆號，回覆「flutter 升級」便可得到源代碼。

歡迎加入Flutter的微信交流羣(微信：laomengit)，一塊兒學習，一塊兒進步，生活不止眼前的苟且，還有詩和《遠方》。

很是但願您關注我我的的公衆號，裏面有各類福利等着你們哦。