【Flutter】アプリバージョンを表示する

はじめに

自分が作成したアプリにpackage_info_plusを使用して、
アプリバージョンを表示する方法を学んだため、記事にしてみました。

package_info_plus とは？

iOS の CFBundleVersion や Android の versionCode など、アプリケーションパッケージに関する情報を照会するための Flutter プラグイン。

（Flutter公式ドキュメントより引用）

開発環境

• macOS Monterey 12.5
• Android Studio Chipmunk | 2021.2.1 Patch 1
• Flutter 3.3.10

事前準備

①　pubspec.yaml に追記

pubspec.yaml に、package_info_plus パッケージを追加します。
※2023/03 時点の最新バージョンが ^3.0.3 だったため、最新を設定しています。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  package_info_plus: ^3.0.3

②　パッケージをダウンロード

下記コマンドを実行して、パッケージをダウンロードします。

$ flutter pub get

③　クラスにパッケージをインポート

package_info_plus を使用したいクラスにパッケージをimportします。

import 'package:package_info_plus/package_info_plus.dart';

package_info_plus の使い方

PackageInfo にて version を指定するとアプリのバージョンが取得できます。
また、buildNumber を指定することでアプリのビルド番号が取得できます。

PackageInfo packageInfo = await PackageInfo.fromPlatform();
String version = packageInfo.version;
String buildNumber = packageInfo.buildNumber;

アプリバージョンの表示

main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text(title),
      ),
      body: const MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  /// 表示用のアプリバージョンテキストを返却します。
  Future<String> getVersionInfo() async {
    PackageInfo packageInfo = await PackageInfo.fromPlatform();
    var text = 'バージョン:${packageInfo.version}(${packageInfo.buildNumber})';
    return text;
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          FutureBuilder<String>(
            future: getVersionInfo(),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              return Text(
                snapshot.hasData ? snapshot.data : '',
                style: Theme.of(context).textTheme.headline6,
                textAlign: TextAlign.center,
              );
            },
          ),
        ],
      ),
    );
  }
}

上記ソースコードでビルドをするとアプリバージョンが表示されます。

さいごに

package_info_plus を使用したアプリバージョンの表示方法を紹介しました。

今回紹介した以外にも下記のアプリに関するパッケージも取得できるので、
同様の方法で取得・表示することが可能です。

• appName: アプリの名前
• packageName: アプリのパッケージ名

参考サイト

• package_info_plus | Flutter Package - Pub.dev