How to Get the App Version/Build Number in Flutter

Flutter Aug 08, 2019

I was building an About page in my Flutter app today and was wondering how to get and display the app version number. A couple google searches and Flutter reloads later, I found out how to do it using the package_info plugin. Here's how.

Steps

  1. Add the package_info package to your Flutter project by listing the former as a dependency in your pubspec.yaml as below. Protip, use Pubspec Assist to speed this up.
dependencies:
  package_info: ^0.4.0+6
  ...
pubspec.yaml

2. Import package_info in the file where you'll be needing the version file.

import 'package:package_info/package_info.dart';
lib/your_file.dart

3. Write an async function that will return the version number (or whatever else you need; you can get the build number, your app name, or package name):

Future<String> getVersionNumber() async {
    PackageInfo packageInfo = await PackageInfo.fromPlatform();
    return packageInfo.version;
    
    // Other data you can get:
    //
    // 	String appName = packageInfo.appName;
    // 	String packageName = packageInfo.packageName;
    //	String buildNumber = packageInfo.buildNumber;
  }
lib/your_file.dart

4. As the version number will be loaded asynchronously, use a FutureBuilder together with a Text widget (or any other widget of your choice):

FutureBuilder(
	future: getVersionNumber(), // The async function we wrote earlier that will be providing the data i.e vers. no
	builder: (BuildContext context, AsyncSnapshot<String> snapshot) =>	Text(snapshot.hasData ? snapshot.data : "Loading ...",) // The widget using the data
),
lib/your_file.dart

5. In my case, I wrapped the text in a disabled ListTile, so that I could place it inside a settings page. Full Example:

import 'package:flutter/material.dart';
import 'package:package_info/package_info.dart';

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          // ...
          // A title for the subsection:
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 10),
                child: Text(
                  "About",
                  style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w500),
                ),
              ),
              Divider(),
            ],
          ),
          // The version tile :
          ListTile(
            enabled: false,
            title: Text("Version"),
            trailing: FutureBuilder(
              future: getVersionNumber(),
              builder: (BuildContext context, AsyncSnapshot<String> snapshot) =>
                  Text(
                snapshot.hasData ? snapshot.data : "Loading ...",
                style: TextStyle(color: Colors.black38),
              ),
            ),
          ),
          // ...
        ],
      ),
    );
  }

  Future<String> getVersionNumber() async {
    PackageInfo packageInfo = await PackageInfo.fromPlatform();
    String version = packageInfo.version;

    return version;
  }
}
Full example code for lib/your_file.dart

That's it! Your page will look somewhat like this:

Screenshot of Version Number in Flutter App

Thanks for reading. If you have any questions, drop them below. Hope this helped!

Tags

Kifah Meeran (MaskyS)

Hi, I'm Kifah, a creator from Mauritius. I read code, books, and people. I'm also passionate about cogsci, design, programming, and life in general. More about me on https://maskys.com

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.