【flutter】アプリバージョンとかを表示する

アプリバージョンを表示しているアプリ多いですよね。
（てか、表示必須？という勉強不足・・・）

そんなに難しくないので、サクッと終われます。
今回もAndroidで実装していきます。iOSは別途記事を書いていきたいと思います。

環境

• Windows(10)
• Flutter（2.10.2）
  • Dart（2.16.1）
  • package_info_plus（^1.4.2）

事前準備

• flutterプロジェクトの生成

手順

flutterプロジェクトの準備

1. flutterプロジェクトの作成

コマンドプロンプトを開いて下記コマンドを実行します。

flutter create {プロジェクト名}

2. パッケージのインストール

• firebase_authをインストールします。

flutter pub add package_info_plus

2. 実装

main.dartをちょいちょい変更してきます。

main.dart

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: 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 StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _appName = '';
  String _packageName = '';
  String _version = '';
  String _buildNumber = '';

  Future getVer() async {
    PackageInfo packageInfo = await PackageInfo.fromPlatform();
    setState(() {
      _appName = packageInfo.appName;
      _packageName = packageInfo.packageName;
      _version = packageInfo.version;
      _buildNumber = packageInfo.buildNumber;
    });
  }

  void initState() {
    super.initState();
    getVer();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_appName',
              style: Theme.of(context).textTheme.headline5,
            ),
            Text(
              '$_packageName',
              style: Theme.of(context).textTheme.headline5,
            ),
            Text(
              '$_version',
              style: Theme.of(context).textTheme.headline5,
            ),
            Text(
              '$_buildNumber',
              style: Theme.of(context).textTheme.headline5,
            ),
          ],
        ),
      ),
    );
  }
}

2. ビルドと確認

ビルドすると↓のようにアプリ名やら、バージョンが表示されます。

3. ちなみの話

プラグインの情報取得元

• packageInfo.appName
  下記パスにあるbuild.gradleのapplicationIdです。

{プロジェクト}
　　└ android
  　　　└ app
     　　　└ build.gradle

めっちゃ端折りまくって・・・。

build.gradle

android {
～中略～
    defaultConfig {
        applicationId "com.example.flutter_appver_sample_add"
    }
～中略～
}

• packageInfo.packageName
  下記パスにあるAndroidManifest.xmlのandroid:labelです。

{プロジェクト}
　　└ android
  　　　└ app
     　　　└ src
	　　　└ main
	   　　　└ AndroidManifest.xml

こっちも端折りまくって・・・。

AndroidManifest.xml

android:label="flutter_appver_sample_addd"

• packageInfo.version
• packageInfo.buildNumber
  上記2つは、pubspec.yamlです。

pubspec.yaml

version: 1.1.0+2

ここの『1.1.0』がバージョンになり、『+2』の部分がビルドナンバーになります。
AndroidアプリをGooglePlayにリリース時に生成する、AABのビルドナンバーは『+2』の部分が適用されます。（AABビルドすると、local.propertiesに転記されます。）

変更後

ちなみに、ホットリロードでは表示変更されないので、値書き換えたらデバッグ停止して再度デバッグを開始してください。

あとがき

アプリ名もpubspec.yamlから取得できると思いきや、実はそうではなかった。。。
Androidアプリリリースの時にビルドナンバーめっちゃ大事なんですよね。
被ると、アップできないので。
という背景があって、どこから取得してるか確認してみました。

参考記事

• PackageInfoPlus

Github

• 準備中