🤩

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

2022/06/03に公開

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

そんなに難しくないので、サクッと終われます。
今回も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);

  
  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;

  
  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();
  }

  
  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.gradleapplicationIdです。
{プロジェクト}
  └ android
     └ app
        └ build.gradle

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

build.gradle
android {
~中略~
    defaultConfig {
        applicationId "com.example.flutter_appver_sample_add"
    }
~中略~
}


  • packageInfo.packageName
    下記パスにあるAndroidManifest.xmlandroid: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アプリリリースの時にビルドナンバーめっちゃ大事なんですよね。
被ると、アップできないので。
という背景があって、どこから取得してるか確認してみました。

参考記事

Github

  • 準備中

Discussion