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!