back
Aug 23, 2022

How to upgrade/force upgrade Flutter app

How to upgrade/force upgrade Flutter app

Introduction

Many times we need to force upgrade mobile apps on user’s mobile. In this blog post, we will learn how to ask users to upgrade the apps or force them to upgrade the flutter app using App Upgrade.

1. Signup/sign in with App Upgrade:

First, let’s signup with App Upgrade. Head over to https://appupgrade.dev/signin or Signup if not already else sign in.

2. Create Project

Project is a high-level term used in App Upgrade. Project is an umbrella that you will be using to manage the versions of your app. Assuming you have done signing up and you are logged in to the app upgrade. You will be welcomed with the following screen.

App Upgrade: Project Empty Screen

Click on the +New Project button to create a new project. Provide a proper Name and Description for your project. App Upgrade: Create Project Form

Click on Submit button and the project will be created. App Upgrade: Project Screen

3. Obtain the API Key:

Click on the API Key button inside the project card, and you will see the API key for your project. App Upgrade: API key

Copy the API key we will need it later.

4. Integrate SDK with Flutter App:

Alright, now it's time for some coding. Let's start with installing the App Upgrade Flutter SDK. Run the following command to install the SDK.

flutter pub add app_upgrade_flutter_sdk

Import the package:

import 'package:app_upgrade_flutter_sdk/app_upgrade_flutter_sdk.dart';

Wrap the body widget with the AppUpgradeAlert widget, provide x-api-key and required appInfo.

import 'package:flutter/material.dart';
import 'package:upgrader/upgrader.dart';
import 'package:app_upgrade_flutter_sdk/app_upgrade_flutter_sdk.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  MyApp({
    Key key,
  }) : super(key: key);
@override
  Widget build(BuildContext context) {
  
    AppInfo appInfo = AppInfo(
      appName: 'Wallpaper app', // Your app name
      appVersion: '1.0.0', // Your app version
      platform: 'android', // App Platform, android or ios
      environment: 'production', // Environment in which app is running, production, staging or development etc.
    );
    
    return MaterialApp(
      title: 'Upgrader Example',
      home: Scaffold(
          appBar: AppBar(
            title: Text('Upgrader Example'),
          ),
          body: AppUpgradeAlert(
            xApiKey: 'MmQwMDU3YWEtNmEzOC00NjQ4LThlYWItNWQ4YTI3YzZdfjdkfdkfdg5', // Your x-api-key
            appInfo: appInfo,
            child: Center(child: Text('Hello World!')),
          )
      ),
    );
  }
}

Let's look into the app info parameters:

  • appName: Your app name.
  • appVersion: Current version of your app.
  • platform: This could be android or ios
  • environment: This could be for example development, int, production

Read more about customization from SDK readme.

5. Testing Integration

Now once we are done with the integration it's time to test whether integration works or not that is if the upgrade alert popup is showing up or not. For testing this out we will need to create a version entry.

6. Create Version

Go to Projects and click on the Versions button, and click on the +New Version button. App Upgrade: Create Version

Provide the following details:

  • App Name: Name of the App
  • App Version: Version of the app you want to mark for the update. For example, 1.0.0 // This is the version you want the user to force upgrade to a newer version.
  • Platform: App platform example: android or iOS
  • Environment: The environment in which the app is running example: development, staging, or production
  • Message: An optional message which you want to show to the user when the user will be alerted of the force update.
  • Force upgrade: Boolean flag if selected means this is going to be a forced upgrade. If not selected indicates it's not a forced upgrade.

After providing the value click on Submit button and version will be created. App Upgrade: Version

Reload your Flutter app. SDK will check if an upgrade is required or not and show an alert popup.

7. Upgrade Alert popup

Based on the value of Force Upgrade the SDK will show a dismissable alert popup or a forced upgrade non-dismissable alert popup as shown below. App Upgrade: Popup Flutter

Conclusion

We learn how to set up App Upgrade to force users to upgrade the flutter apps. To know more about App Upgrade visit: https://appupgrade.dev Also, Check out App Upgrade Documentation to understand how it works.

Thanks for reading.

  • If you have any queries write to us here.
  • Follow us on Twitter for announcements.
  • Subscribe on YouTube for demos and tutorials.
  • Star us on Github to see what we are building.