初めてのFlutterアプリを開発・リリースするまでに使用したツール・パッケージ
はじめに
社内勉強会でFlutterに興味を持ち、勉強がてらアプリを作っていたのですが、せっかく作ったので先日AndroidアプリとしてGoogle Playストアにリリースしました。
今回のアプリの開発や、リリース資材の準備等に使用したサイトやWebサービス、Dartパッケージを紹介していこうと思います。
各ツールについては簡単な紹介となってしまいますが、他のFlutterアプリの開発する方の参考になればと思います。
今回リリースしたアプリ
表示された数字の読み方をポチポチ解答していくミニゲームです。
このゲームでトレーニングすれば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を使用しています。
その他使用しているWebサービス
Googleフォーム
社内アンケートやイベントのアンケート等でよく目にするGoogleフォームですが、アプリ開発をするようになって初めて自分で作成しました。
アプリ内にリンクを配置し、お問い合わせフォームとして使用しています。
Discussion