初めてのFlutterアプリを開発・リリースするまでに使用したツール・パッケージ

はじめに

社内勉強会でFlutterに興味を持ち、勉強がてらアプリを作っていたのですが、せっかく作ったので先日AndroidアプリとしてGoogle Playストアにリリースしました。

今回のアプリの開発や、リリース資材の準備等に使用したサイトやWebサービス、Dartパッケージを紹介していこうと思います。

各ツールについては簡単な紹介となってしまいますが、他のFlutterアプリの開発する方の参考になればと思います。

今回リリースしたアプリ

https://play.google.com/store/apps/details?id=com.miyashiiii.sudoku

表示された数字の読み方をポチポチ解答していくミニゲームです。

このゲームでトレーニングすれば1000億までの数字であれば一目で読めるようになります。実際に私は開発のために何度もプレイしたおかげで、1000億までなら「いち、じゅう、ひゃく、、、」と数えずに読めるようになりました。笑

Google/広告や解析以外のサーバー機能は使わずアプリ内で処理が完結しています。

Dart・Flutterの学習

Dart、Flutterの学習に当たっては多くの記事にお世話になっていますが、主に参考にしたものを挙げます。

初めての Flutter アプリの作成（パート 1）

まずは公式のサンプルアプリを実装しながらDart・Flutterの雰囲気を掴みました。

Flutter Widget of the Week!

各Widgetの理解にあたってはWidget of the Weekの知らないWidgetの動画を暇なときに眺めて、引き出しを増やすようにしています。

開発管理に使用しているWebサービス

Notion

カード機能を用いたタスク管理と、その他メモの管理を行っています。
数読(今回開発のアプリ)のページを作成し、画面上部はタスク管理のカンバンを表示、それ以下に子ページをギャラリー表示、といった配置で使用しています。

Figma

シンプルなUIと豊富なフォント・素材を用いて簡単に画像作成ができます。
アイコン作成、ストア用のスクリーンショット等のリリース資材の作成に使用しました。

ストア用の画像作成にあたっては別記事も書いています。
スクショをスマホ画像にはめ込んでストア掲載用画像を作成する

Dartパッケージ

基本機能系

shared_preferences

iOSのNSUserDefaults, AndroidのSharedPreferencesをwrapする、ローカルにkey-valueデータを保管するためのライブラリ。
ハイスコアの保管、初回起動の判別(チュートリアル表示有無の判定)に使用してます。

provider

状態管理にはProvider+ChangeNotifierを使用しました。
Providerの理解にあたっては、下記チュートリアルを参考にしました。
Simple app state management

just_audio

BGMの再生に使用しています。
同様のパッケージにaudioplayersがあり、当初こちらを使用していましたが、ループ再生時に一瞬音が途切れる問題が解決できず、just_audioに乗り換えました。

url_launcher

指定したURLをブラウザで開く事のできるパッケージ。
後述するお問い合わせ用のGoogleフォームに使用しました。
メールやSMSの作成、電話発信画面への誘導もできるらしい。

package_info

AboutDialogに記載する、アプリ名、アプリのバージョンを動的に取得するために使用。

UI系

page_transition

画面遷移のアニメーションを手軽に実装できるパッケージ。

flutter_screenutil

初期化時にデザインの前提となる画面サイズを設定し、各コンポーネントのサイズ指定時下記のように記述することで、画面サイズが変わっても比率を保持してくれます。

Container(
  width: 50.w,
  height:200.h
)

tutorial_coach_mark

以下のようなチュートリアル画面を手軽に実装できるパッケージです。

外部サービス系

外部サービスとしてはFireBaseのAnalyticsとCrashlytics(クラッシュレポート)、Google Admobを使用しています。

• firebase_core
• firebase_analytics
• firebase_crashlytics
• google_mobile_ads

その他使用しているWebサービス

Googleフォーム

社内アンケートやイベントのアンケート等でよく目にするGoogleフォームですが、アプリ開発をするようになって初めて自分で作成しました。
アプリ内にリンクを配置し、お問い合わせフォームとして使用しています。