强大的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: [
      '1、支持立体声蓝牙耳机,同时改善配对性能',
      '2、提供屏幕虚拟键盘',
      '3、更简洁更流畅,使用起来更快',
      '4、修复一些软件在使用时自动退出bug',
      '5、新增加了分类查看功能'
    ],
    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),
    ...
)

通过titleStylecontentStyle设置其样式,可以设置字体大小、颜色、粗体等。

设置“取消”和“升级按钮”文本和样式:

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:https://github.com/781238222/flutter-do/tree/master/flutter_app_upgrade

交流

如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。

同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。

Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容