My Flutter-Flight – “What’s new” Messages

---

The idea had been in the back of my head for a while now: I would like to show some fancy dialogs whenever I published a new update for my app, to tell my users what’s new.
Also there had been repeated question for basic functionalities, that would suit a tutorial. But I don’t want to cluster my app with info texts.

The problem

For new users, I want to display a short tutorial, introducing somewhat hidden functionalities (swipe gestures don’t seem that intuitive), to prevent frustration and frequent questions. Therefore, whenever the app is used for the first time, I want to show a series of dialogs, explaining these functions. But I don’t want to show this over and over again.

Additionally, I would like to display a dialog with added data or functionality, whenever an update is installed. These informations are contained in the app-store entries, but not many users are reading them…

The solution

I needed Stackoverflow to give me the short and easy idea I was looking for without knowing it.

Long story short; I will save the apps version and compare it whenever the app is started. A new version code will differ from the former, and when no version is saved, we will have a new user and show him the tutorial.

The actual coding

This code goes within my main.dart, where the app is initially loaded, build and instantiated. Remember that the preferences have to be loaded before you can get them. Otherwise you will always return null (and show the tutorial).
This might not be necessary, depending on your apps concrete workflow.

Preferences prefs;
PackageInfo packageInfo;

@override
 void initState() {
   super.initState();
   _loading();
 }

Future<void> _loading() async {
   try {
     await prefs.load();
     _checkVersion();
     return;
   } on Exception catch (e) {
      // TODO handle exception
   }
  
Future<void> _checkVersion() async {
   String savedVersion = prefs.getVersion();
   packageInfo = await PackageInfo.fromPlatform();
   String runningVersion = packageInfo.version;
   if (savedVersion == null) {
     _showTutorial();
   } else if (savedVersion != runningVersion) {
     _showUpdates();
   }
 }

We need to store the version in our Preferences.dart. When no value is set (initially), we want to receive null to initiate the tutorial.

  String version;

  /*
    returns null when no version is set yet
   */
  String getVersion() {
    return version; // returning null is a valid option
  }

  void setVersion(String newVersion) {
    version = newVersion;
    sharedPreferences.setString('version', newVersion);
  }

  void _load() async {
    sharedPreferences = await SharedPreferences.getInstance();
    version = sharedPreferences.getString('version');
  }

To test, know that the version codes came from files within your project – depending on the platform you build on.

While debugging, the version comes from version: 2.0.0+1 (or whatever) in your pubspec.yaml. Change the version number here to test.

This version number is overwritten for release. This is for android, in local.properties.

flutter.buildMode=debug
flutter.versionName=2.0.0
flutter.sdk=/Library/flutter
sdk.dir=/Users/erdbaerchen/Library/Android/sdk
flutter.versionCode=1

The iOS one is within XCode and the General information tab of the Runner.

While debugging, changing the version in the pubspec.yaml was the right thing to do.

The result

My methods _showTutorial() and _showUpdates() will in my case use showDialog() and contain a text, that I will adjust according to the update.

I have to admit that I am very much in love with this feature.