How to Access Your Flutter App Version the Easy Way (No Packages Required)

The Problem: Getting Your App Version Should Be Simple

If you’ve ever needed to display your app’s version in your Flutter app, you’ve probably reached for the version_info_plus package. It’s popular, sure, but do you really need an entire package just to show a version number?

Here’s the thing: if you only need to display your app version (maybe in an “About” screen or footer), there’s a much simpler way that doesn’t require any external dependencies.

What you’ll get:

• No external packages to maintain
• Synchronous access to your version (no async/await needed!)
• Your app stays lightweight
• The version is automatically pulled from your pubspec.yaml

Note: This tutorial focuses on VS Code, but the same principles apply to other IDEs with minor adjustments.

How This Magic Works

The idea is beautifully simple: every time you launch your Flutter app, we’ll automatically extract the version from your pubspec.yaml file and pass it to your app using Flutter’s built-in --dart-define flag.

Think of it as injecting the version directly into your app at compile time!

Step 1: Install the Required VS Code Extension

First, you’ll need to install the Tasks Shell Input extension in VS Code.

Why do we need this? This nifty extension lets us run shell commands and use their output in our VS Code configurations. In our case, we’ll use it to read the version from pubspec.yaml and inject it into our Flutter app.

You can install it by:

1. Opening the Extensions panel in VS Code (Ctrl/Cmd + Shift + X)
2. Searching for “Tasks Shell Input”
3. Clicking “Install”

Step 2: Set Up Your Launch Configuration

Now comes the fun part! We need to configure VS Code to automatically grab your version and pass it to Flutter when you run your app.

Open or create .vscode/launch.json in your project root and add this configuration:

{
  "version": "0.2.0",
  "inputs": [
    {
      "id": "appVersion",
      "type": "command",
      "command": "shellCommand.execute",
      "args": {
        "command": "grep '^version:' pubspec.yaml | sed 's/version: //g' | tr -d ' '",
        "useFirstResult": true,
      }
    }
  ],
  "configurations": [
    {
      "name": "development",
      "request": "launch",
      "type": "dart",
      "program": "lib/main.dart",
      "args": [
        "--dart-define=APP_VERSION=${input:appVersion}"
      ]
    },
  ],
}.vscode/launch.json

Let’s break this down:

1. The inputs section: This defines a reusable input called appVersion that runs a shell command
2. The shell command: grep '^version:' pubspec.yaml | sed 's/version: //g' | tr -d ' '
   • Finds the line starting with version: in your pubspec.yaml
   • Removes the version: part
   • Strips any extra spaces
   • Result: just the version number (e.g., “1.0.0+1”)
3. The configuration: Uses ${input:appVersion} to inject the version as a --dart-define argument

Pretty clever, right? Every time you launch your app, it automatically reads the current version from your pubspec.yaml!

Step 3: Use the Version in Your Flutter App

Now for the payoff! In your Flutter code, you can access the version synchronously using String.fromEnvironment:

const appVersion = String.fromEnvironment('APP_VERSION', defaultValue: 'unknown');

WARNING: Make sure to use const here. This ensures that the value is available at compile time, allowing for synchronous access.

That’s it! No async/await, no package imports, no complex setup. Just a simple const that gives you your app version.

Here’s a practical example of how you might use it:

class AboutScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('About')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('My Awesome App'),
            SizedBox(height: 8),
            Text('v$appVersion'),
          ],
        ),
      ),
    );
  }
}

Step 4: Making It Work in CI/CD

When you’re ready to build your app for production, you’ll need to include the same --dart-define argument in your build commands.

For web builds:

flutter build web --dart-define=APP_VERSION=$(grep '^version:' pubspec.yaml | sed 's/version: //g' | tr -d ' ')

The beauty is that you use the exact same shell command everywhere, ensuring consistency between your development and production builds.

Wrapping Up

And there you have it! A simple, dependency-free way to access your app version in Flutter. No external packages, no async complications, just clean, synchronous access to your version information.

Benefits recap:

• ✅ No external dependencies
• ✅ Synchronous access (no async/await needed)
• ✅ Automatically stays in sync with your pubspec.yaml
• ✅ Works in both development and CI/CD
• ✅ Lightweight and maintainable

This approach works great when you just need to display version information. If you need more advanced features like platform-specific versions, or detailed package info, then version_info_plus might still be worth considering. But for the common case of just showing your app version? This simple solution has you covered!