Note: The Flutter and Dart versions are as follows without special instructions:

  • Flutter version: 1.12.13+ Hotfix.5
  • Dart version: 2.7.0

The application upgrade function is one of the basic functions of the App. Without this function, users will not be able to upgrade, bugs in the application or new functions will be unreachable to old users, or even the loss of users.

It goes without saying how important it is to upgrade applications. Here are a few ways to upgrade applications, from a platform perspective:

  • On IOS, you can upgrade an app only by jumping to the App Store.
  • On Android, you can upgrade by jumping to the app market or downloading the APK package.

In terms of mandatory upgrade, the upgrade can be mandatory or non-mandatory:

  • Forced upgrade: it means that users must upgrade to continue using the App. If it is not very necessary, it is not recommended to use such a tough way, which will cause users’ aversion.
  • An optional upgrade allows users to click “Cancel” and continue using the App.

The following describes the upgrade process for IOS and Android.

IOS Upgrade Process

The IOS upgrade process is as follows:

Process description:

  1. Usually, we access the background interface to check whether there is a new version. If there is a new version, a prompt box is displayed to determine whether the current version is “Forced upgrade”. If so, only an “Upgrade” button is provided for users, otherwise, “Upgrade” and “Cancel” buttons are provided for users.
  2. A dialog box is displayed indicating whether to upgrade. If you select Cancel, the dialog box disappears. If you select Upgrade, you can switch to the App Store for the upgrade.

Android Upgrade Process

Compared with ios, the Android upgrade process is slightly more complicated, and the flow chart is as follows:

Process description:

  1. Access the background interface to check whether the latest version is available. If yes, an upgrade prompt box is displayed to check whether the current version is Mandatory upgrade. If yes, only an Upgrade button is provided for the user.
  2. A dialog box is displayed indicating whether to upgrade. If you select Cancel, the dialog box disappears. If you select Upgrade, determine whether to upgrade in the app market or download apK.
  3. If the APK upgrade is downloaded, the SYSTEM starts to download the APK. After the download is complete, the SYSTEM switches to the APK installation wizard page.
  4. If jump to application market, determine whether specifies the application market, such as only in huawei application market shelves, so you need to specify the jump to huawei application market right now, even if you are on the application in many markets, also should be installed according to user’s mobile phone market to specify an application market, let the user choose application market is not a good experience, Also, users don’t know which market to go to for updates, which can be even more awkward if they choose a market where you don’t have your app.
  5. The update page of the specified application market is displayed.

After introducing the upgrade process, the protagonist finally appeared.

This section describes how to use App upgrade function

Simply call the upgrade detection method in the initState method of the home page:

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

The _checkAppInfo method checks the background interface to check whether there is a new version and returns the Future

type. AppUpgradeInfo contains the version information, such as title, upgrade content, APK download URL, and whether to force upgrade.

The iosAppId parameter is used to jump to the App Store.

The _checkAppInfo() method, which normally accesses the background interface, returns the new version information directly as follows:

Future<AppUpgradeInfo> _checkAppInfo() {
  return Future.value(AppUpgradeInfo(
    title: 'New version V1.1.1',
    contents: [
      1. Support stereo Bluetooth headset and improve pairing performance.'2. Provide on-screen virtual keyboard '.'3. Simpler and smoother, faster to use '.'4, fix some software exit bug when using '.'5, new added classification view function '
    ],
    apkDownloadUrl: ' ',
    force: false));Copy the code

Now that the basic upgrade function is complete, the pop-up dialog box looks like this:

Click “Later”, the prompt box disappears, click “Experience now”, automatically distinguish between different platforms.

Accessing the background interface to obtain the information about the new version generally requires the package name and version of the current App. The query method is as follows:

await FlutterUpgrade.appInfo
Copy the code

The type returned is AppInfo:

  • VersionName: version number, for example, 1.0.0.
  • VersionCode: unique Android version, corresponding to the versionCode in Android build.gradle. Ios returns 0.
  • PackageName: indicates the packageName, which corresponds to the applicationId in Android build.gradle and the BundleIdentifier in ios.

IOS Platform Upgrade

The iOS platform directly jumps to the relevant page of the App Store. The iOS AppID must be set correctly; otherwise, the app will not be found in the App Store.

Download APK for Android

The Android platform will determine whether the APK download URL is set. If so, the apK download will be directly downloaded. The effect is as follows:

When the download is complete, jump directly to the APK installation boot interface, the effect is as follows:

When the user clicks Permit, the following interface appears:

Click continue to install, the above installation boot screen is the system interface, different phones or different Android versions may be slightly different.

The Android platform jumps to the app market

If you do not provide the download address of APK, click “Experience Now” to jump to the app market. If you do not specify the app market, a prompt box will pop up for users to select the app market. The effect is as follows:

The prompt box will contain all the app markets installed on the phone. The user selects one and jumps to the details screen of the corresponding app market. If the app is not currently available in this market, the “Lost screen” will appear.

Usually, the app market is specified. To do this, you need to know the app market installed on the user’s phone. The query method is as follows:

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

The plugin is built into the commonly used domestic app markets, including Xiaomi, Meizu, Vivo, OPpo, Huawei, ZTE, 360 Assistant, App Bao, PP Assistant, Wandoujia. If you need to detect other app markets, such as Google Play, just add the package name of GooGL Play:

_getInstallMarket() async {
  List<String> marketList = await FlutterUpgrade.getInstallMarket(marketPackageNames: ['Google Play Package name']);
}
Copy the code

If you want to specify a built-in app market, you can obtain the information about the built-in app market according to the package name:

AppMarketInfo _marketInfo = AppMarket.getBuildInMarket(packageName);
Copy the code

Designated Huawei Application markets:

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

Specify no built-in app market methods as follows:

AppUpgrade.appUpgrade(
  context,
  _checkAppInfo(),
  iosAppId: 'id88888888',
  appMarketInfo: AppMarketInfo(
    'App Market Name (optional)'.'App Market Package name'.'App Market Category Name'));Copy the code

Prompt box style customization

If the default upgrade prompt does not meet your needs, you can customize your upgrade prompt.

Title and text style setting of upgrade content:

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

Style it with titleStyle and contentStyle, and you can set font size, color, bold, and so on.

Set “Cancel” and “Upgrade button” text and style:

AppUpgrade.appUpgrade(context, _checkAppInfo(),
    cancelText: 'Later.',
    cancelTextStyle: TextStyle(color: Colors.grey),
    okText: 'Upgrade now',
    okTextStyle: TextStyle(color: Colors.red),
	...
)
Copy the code

The default “Cancel” button text is “later”, the default “upgrade” button text is “play now”.

To set the background color of the “upgrade” button, 2 colors are required, and 2 colors are linear gradient from left to right. If you want to set a solid color, just set the two colors to the same color. The default color is the system’s primaryColor:

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

Set the color of the progress bar:

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

Set the rounded radius of the upgrade prompt box to 20 by default:

AppUpgrade.appUpgrade(context, _checkAppInfo(),
    borderRadius: 15,...).Copy the code

Github:github.com/781238222/f…

communication

Old Meng Flutter blog address (nearly 200 controls usage) : laomengit.com