How would you determine the current version of your Flutter Web App?

My team works on a complex Flutter app that runs on Android, iOS, and (now) Web. Finding out the version of an app is straightforward for Android and iOS apps — you just check the store listing or the settings page.

But what about web apps? How does one determine the current version of deployment? That too on development, staging, and production environments undergoing frequent, parallel deployments by a team of seven naive mobile-turned-web developers? We did the most obvious.

Approach #1 — Adding Version Comments to HTML

Initially, we opted for a straightforward solution — adding version information as an HTML comment at the bottom of the index.html file.

Version information comment in index.html

This method is simple, requires no setup to begin with, and (almost) solves the problem. We found the following pros and cons associated with this approach:

Pros:

• Immediate Reflection: The version information is available as soon as the index.html file is loaded.
• No Dependencies: This approach doesn’t rely on other script files, so the version is visible even if other files aren’t loaded yet, or the app crashes completely.

Cons:

• Manual Updates: The major drawback is the need for manual updates. While it works with collective effort, managing it becomes tedious when people are involved.

Room for Automation
While manual updates were a setback, the process is easy to automate using a script in the CI/CD pipeline.

After running it for a few weeks, I wished I could make it smoother. Even though this method worked well, I wanted to reduce the need for manual intervention.

Approach #2 — Using DartJS for Versioning

While digging into DartJS docs, I discovered that I could leverage it to expose the version information as a global variable and retrieve it on the web side. This solution gets the version from your PackageInfo, sourcing it from the pubspec.yaml file, and makes it accessible to the JavaScript context.

Here’s how it works:

• I wrote a Dart function that adds the version information to the JS context.
• The version information is then exposed globally to the window object, meaning anyone can check the current version by accessing appVersion or window.appVersion variable from the developer console.

import 'package:package_info_plus/package_info_plus.dart';


// add this function to your web-specific dart files
dynamic addAppMeta() async {
  // Get the package info
  PackageInfo packageInfo = await PackageInfo.fromPlatform();
  String version = packageInfo.version;

  // Expose the version to JavaScript
  js.context['appVersion'] = version;
}

// call it before runApp in your main.dart file
addAppMeta();

runApp(...);

Accessing window.appVersion variable in developer console

This approach also comes with its own pros and cons:

Pros:

• Automated Process: The version is automatically fetched from pubspec.yaml during each build. There's no need for additional scripts or manual updates. The flutter build command handles everything for you.
• Simplified Maintenance: Once set up, this method works seamlessly, and the need for manual updates is entirely eliminated.

Cons:

• Load Time Dependency: The main downside is that the version information isn’t available until the main.dart.js file has fully loaded. While this is usually quick, it can be less immediately available than the previous HTML approach in slow environments, or if your app crashes completely at start. I don’t see this as a deal breaker as this file has to load in all scenarios for your Flutter Web app to run.

Conclusion

Both methods have their merits, and the choice depends on your specific needs. The HTML version comment approach offers immediate availability, but it requires manual updates unless automated via CI/CD scripts. On the other hand, the DartJS method provides a fully automated solution that integrates well with Flutter.

Which method would you prefer for your project? Have you tried something different?

🚀 Let’s connect!

Connect with me on LinkedIn for professional insights and networking.

Explore my contributions on GitHub and Stack Overflow to collaborate on something amazing! ✨

If you’ve read this far, it means you’re not just interested in getting the job done, but in creating truly exceptional apps. If that’s the case, you might also enjoy my other blogs that delve into making excellent apps.