見出し画像

Flutterアプリ公開の最後のほうにやったこと

はじめに

先日、Flutterアプリの勉強のために、簡単なサンプルアプリを作りGooglePlayに公開しました。

F-Punks
API通信を行い、リスト表示/詳細表示をするアプリです。BrewDogのビールについての情報を見ることができます。

今回は、自分への備忘も兼ねて、Flutter製アプリ公開の最後のほうに行った作業を残しておこうと思います。

ちなみにiOSアプリも公開に臨んだのですが、サンプルアプリのような機能が簡単すぎるアプリは「Guideline 4.2 - Design - Minimum Functionality」という理由でリジェクトされるようで、自分のアプリもだめでした。
普段はAndroidアプリ開発をメインに行なっているので、サンプルアプリ公開にハードルがあることを知らなかったのですが、iOSのリジェクトを初体験することができました。

環境

Flutter -> 1.2.1
Android Studio -> 3.3.2

アプリアイコン作成

iOS/Androidのアプリアイコンを一括で作成できる、flutter_launcher_iconsを使いました。
今回は、
  iOSアイコン → 透過なし
  Androidの通常アイコン →  透過あり 
  Androidのアダプティブアイコン
のアイコンを作成したかったので、pubspec.yamlに以下のように記述しました。

dev_dependencies:
  flutter_launcher_icons: ^0.7.0

flutter_icons:
  android: true
  ios: true
  image_path_android: "images/icon_app.png"
  image_path_ios: "images/icon_app_rect.png"
  adaptive_icon_foreground: "images/ic_foreground.png"
  adaptive_icon_background: "images/ic_background.png"

ターミナルで以下を実行すると、それぞれのOSの環境にアプリアイコンが配置されます。

flutter packages get
flutter packages pub run flutter_launcher_icons:main

アプリ情報画面作成

アプリ情報を表示する画面を作成しました。

後で気がついたのですが、ダイアログでアプリ情報を表示するのであれば、標準で用意されているshowAboutDialogを使って表示することもできます。

import 'package:flutter/material.dart';

...
          InkWell(
            onTap: () => showAboutDialog(
                  context: context,
                  applicationName: "F-Punks",
                  applicationVersion: versionName,
                ),
...

OSSライセンス表示

上記のshowAboutDialogと同じように、'package:flutter/material.dart'をimportして、showLicensePageを呼び出すとOSSライセンス一覧の画面を 開くことができます。

import 'package:flutter/material.dart';

...
          InkWell(
            onTap: () => showLicensePage(
                  context: context,
                  applicationName: "F-Punks",
                  applicationVersion: versionName,
                ),
...

アプリ名, アプリバージョン, applicationLegalese(アプリ名の下に注記のようなもの)を出すことができます。
showLicensePageの引数には、appIconも渡せるのですが、現時点では渡された引数が使われておらず、ライセンス画面にアプリアイコンは出ないようでした。

void showLicensePage({
  @required BuildContext context,
  String applicationName,
  String applicationVersion,
  Widget applicationIcon,
  String applicationLegalese
}) {
  assert(context != null);
  Navigator.push(context, MaterialPageRoute<void>(
    builder: (BuildContext context) => LicensePage(
      applicationName: applicationName,
      applicationVersion: applicationVersion,
      applicationLegalese: applicationLegalese
    )
  ));
}

リリース用アプリのビルド

基本的には以下の公式ページの通りに行いました。

iOSは以下のコマンドでリリースビルドをしました。

flutter build ios

AndroidはApp Bundle形式でアプリを作りました。
以下のコマンドでリリースビルドしました。

 flutter build appbundle 

ストア画像作成

アプリストアの画像の作成はSketchで行いました。ストアに上げるべきサイズが用意されているフリーのテンプレートを使っています。
Android
iOS
iOS(iPad)

ちょっとしたTipsですが、
Debugビルドで実行中のアプリで、右上のDEBUG帯を消した状態でスクリーンショットを取りたい場合、Dart DevToolsでDEBUG帯のON/OFFを切り替えることができます。

また、Androidでスクリーンショットを取る場合、以下のように設定をすることで、ステータスバーが綺麗な状態で表示できます(バッテリー100%, 余計な通知が消える.. etc.)。

開発者向けオプション > システムUIデモモード で、
・デモモードを有効にする -> ON
・デモモードを表示 -> ON

まとめ

Flutterでアプリ公開したときの最後のほうにやったこと、を紹介しました。
・アプリアイコン作成
・アプリ情報画面作成
・OSSライセンス表示
・リリース用アプリのビルド
・ストア画像作成

今度はiOSアプリも公開できるようなものを作ります。

作成したアプリ「F-Punks」のコードは以下で公開していますので、興味がありましたら、ぜひご覧ください!
https://github.com/iiinaiii/F-Punks

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
ーーー・ー ー・ー・・
13
Androidアプリ開発をメインで行っているエンジニアです。 趣味で個人アプリの開発もしています。 GitHubアカウント → https://github.com/iiinaiii