Update App — Flutter

Welcome to this tutorial for adding update app to your flutter application

You can connect with me on Instagram:

theboringdeveloper

Enough! Lets start with it.

Let’s start by seeing our end goal-

For IOS-

For Android-

Similar for IOS.

Breaking down

• We have two types of update dialogs: Optional update and Required update. Based on your preference you can keep one or both of them.

For both Optional and Required update dialog:

• If user clicks on Update now, we will redirect the user to the PlayStore or AppStore page of our app.

For Optional update dialog:

• If user clicks on Later, close the dialog and show it next time user opens the app. (Again, you can change it based on preference, maybe change the option to remind me tomorrow)
• For Android, If user selects Never ask again then disable Update now. Then if user clicks on Later, do not show the update dialog next time user opens app.
• For IOS, If user clicks on Don’t ask me again then close the dialog and do not show the update dialog next time user opens app.

Key points:

• User can dismiss the optional update dialog by clicking outside the dialog box. In this case do not show again state will not be stored locally.
• User cannot dismiss the required update dialog by clicking outside the clicking outside the dialog box.

Let me show you something and you guess the difference.

So here is it-

• In the first one, we were logged in successfully and navigated to the main screen. In the second one, we were not logged in and stayed at the login screen.
• What’s interesting in this is that we were able to see the same dialog on both screens. This is not as easy it sounds like and it was a nightmare to get this done.

But what I wanted exactly?

When user opens the app, we check-

1. Latest app version- retrieved from the server
2. Current app version
3. Minimum app version- retrieved from the server

If the current app version is less than minimum app version-

We show the required update dialog and force the user to update. Users who have disabled to see update will still see it.

In case the minimum app version is satisfied, but the current version is less than latest app version.

If dialog not disabled, we show the optional update dialog and do not force the user to update. We also give user the option to not see the dialog again.

Here is the most important part and the reason I decided to write this blog-

The app version checking and showing the dialog should be done at a single place. We should be able to show the user the update dialog, no matter which screen the user is on.

In simple words, here is why it is difficult-

1. To show a dialog, we need the context of the active screen.
2. As we navigate the current active context keeps on changing.
3. Therefore we will need to add it at many places and increase complexity.

But we need to keep it simple.

Lets solve this

I have made it simple for you so you just have to copy and paste most of the code.

Here is how the data is structured-

What you have to do?

1. Add some libraries to pubspec.yaml

shared_preferences | Flutter Package

Use: Locally store do not show info.

pub_semver | Dart Package

Use: To parse version string from server and compare them easily.

package_info | Flutter Package

Use: To get current app version

UPDATE: Use can also use another package for in-app upgrade in Android.

in_app_update | Flutter Package

2. Copy and paste both the above code files to your project.

3. Make changes to the first code file

You need to make two changes, based the server you are using.

1. Change the query to get the latest and minimum app version.
2. Get the response and parse it to Version type for easy comparison.

After making the above changes, add this to MaterialApp.

child: MaterialApp(
  builder: (context, widget) => Navigator(
    onGenerateRoute: (settings) => MaterialPageRoute(
      builder: (context) => UpdateApp(
        child: widget,
      ),
    ),
  ),

Read more about the builder property here-

builder property

Let’s check the output now-

Lets change the minimum app version

The output now-

As you can see, now the user is forced to update the app and can no use the app.

To open Play store or App store page on update click. Use url_launcher.

url_launcher | Flutter Package

Its done :)

Thank you for staying

More flutter spinner blogs

Credit Card Slider— Flutter

Twitter Spinner — Flutter

Common bottom navigation bar made easy — Flutter

Uploading images to AWS S3 with Flutter — Part 1

Flutter: Custom tab indicator for TabBar

I will be posting more about flutter, so stay tuned :)

theboringdeveloper