How to Get the App Version/Build Number in Flutter
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
- Add the
package_info
package to your Flutter project by listing the former as a dependency in yourpubspec.yaml
as below. Protip, use Pubspec Assist to speed this up.
dependencies:
package_info: ^0.4.0+6
...
2. Import package_info
in the file where you'll be needing the version file.
import 'package:package_info/package_info.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;
}
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
),
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;
}
}
That's it! Your page will look somewhat like this:

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