はじめに

Flutterで新規アプリを爆速で作っていきたいと思うけれど、毎度毎度、アプリの土台を作り上げるのに時間がかかってしまう。

最初の流れをテンプレ化できれば、もっと開発に時間が当てれますよね。
という事で、アプリの作りはじめに何をやるかをメモ程度に残していきます。

手順

現状考えている手順なので、後から書き換えるかもしれないです。
また、アドバイスがあればコメントいただけると幸いです。

プロジェクト作成

当たり前ですがここから。

Githubとの連携

僕はほぼほぼGithubを使うので、最初に連携しておきます。
コマンドは以下の順。

git init

イメージファイルや音声ファイルを使用予定の場合は、Git Large File Storageをインストールしておく。
https://docs.github.com/ja/github/managing-large-files/installing-git-large-file-storage

使用予定のファイルを予め追加しておきます。
png, jpg, ico, mp3など

以下のコマンドで、.gitattributesにGit LFSに関連付けたい種類のファイルを追加していく。
https://docs.github.com/ja/github/managing-large-files/configuring-git-large-file-storage

こちらも参考に
https://qiita.com/takish/items/4b397caa5549a39a8194

git lfs install

git lfs track "*.psd"

git lfs track "*.png"

gitの履歴の容量が大きくなってしまわないようにするためのなので、最初にやっておくべき。

その後、ローカルのプロジェクトをgithubにアップロード。

git add .

git commit -m "Initial Commit"

git remote add origin リポジトリのURL

git push -u origin master

こちらを参考に。
https://qiita.com/under_chilchil/items/ec9d0050c1e3fb6576de

たまに起こるエラー　**fatal: remote origin already exists.**の対処
https://qiita.com/yu-ki0718/items/3c8aae2c81ca3f82f522

静的解析の導入

Flutterをやっているといろんな書き方が許容されるので、ルールを最初に設定しておくのがいいと思います。
僕は最初にmonoさん作のパッケージを導入しています。
https://pub.dev/packages/pedantic_mono

後から導入すると、書き換えに労力を多少使うと思うので最初に入れるべき。

firebaseでプロジェクトを作成

個人開発する場合はfirebaseを使用することが多いと思います。
最初にさっさと作っておきましょう。
https://firebase.google.com/docs/flutter/setup?hl=ja
こちらを参考に。

firebaseを使う際に、使用するかもしれないパッケージリストはこちら。
https://firebaseopensource.com/projects/firebaseextended/flutterfire/

ユーザーログインの確認（firebase Auth）

データを保存するために、firestoreを使うことが多いですが、そこでuserId毎にデータを保存することが多いです(経験上)。
userIdが必要なら、先に認証系を作っておくと作業効率がいい気がする。
こちらのドキュメントを参考に。
https://firebase.flutter.dev/docs/auth/usage/

firestoreの導入

ようやくここでfirestoreを導入。
先ほどの認証により取得したuid(userId)を使用し、ユーザーごとのデータを保存。
firestoreの導入はこちらのドキュメントを参考に。
https://firebase.google.com/docs/flutter/setup?hl=ja
firebaseの導入から紹介してくれてます。

アプリのテーマの設定

デザインなどが既にあるのならば、よく使う物をテーマに設定しておくべきですね。
カラー、テキスト、その他Widgetのデフォルトテーマを設定しておきましょう。
公式ドキュメントが参考になると思います。
https://flutter.dev/docs/cookbook/design/themes
頑張って英語は読めるようにしたほうがいいです。

モデルクラスの自動作成準備

以下のパッケージを使用します。
https://pub.dev/packages/json_serializable
https://pub.dev/packages/json_annotation
https://pub.dev/packages/build_runner

モデルクラスをbuild_runnerを使って自動生成すると便利です。
jsonのシリアライズ・デシリアライズ処理のコードを自動生成してくれます。

以下は一例ですが、
1.jsonからPhraseオブジェクトに変換する。(fromJson)
2.Phraseオブジェクトをjsonに変換する。(toJson)

部分のコードを勝手に用意してくれます。
firestoreにデータを保存するのなら、オブジェクトのままは保存できないです。
結局json形式にして保存しないといけないので、build_runnerは超便利。


import 'package:json_annotation/json_annotation.dart';

part 'phrase.g.dart';

@JsonSerializable()
class Phrase {
  Phrase();

  factory Phrase.fromJson(Map<String, dynamic> json) => _$PhraseFromJson(json);

  Map<String, dynamic> toJson() => _$PhraseToJson(this);

  String jaPhrase;
  String enPhrase;
  String listType;
}

ちなみに、build_runnerを走らせるコマンド

flutter packages pub run build_runner build

は暗記するべきです。
よく使うので毎回ググる・メモからコピペするより、暗記するべきコマンドだと思っています。

参考記事
https://qiita.com/kitoko552/items/81168294f5738175ff1d

状態管理方法の選定

ここら辺からは、手順に入れるものなのかな？と思いつつ書いてます。
公式ドキュメントに、いろいろな状態管理方法が記述してあります。
https://flutter.dev/docs/development/data-and-backend/state-mgmt/options

setState => BLoC / Rx => Provider => Riverpod
と流行りは移っているようですが。
Flutterの状態管理法はいろいろあってどれを使えばいいんだ！って感じですが、やはり最新のものほどコードもすっきりしてると思います。

初心者のstate管理の練習程度のプロジェクトであればsetStateでもいけると思います。
大きいプロジェクトになると、BLoC、Provider、Riverpodあたりが必要かもですね。

ProviderやRiverPodを作った方は天才ですね。。
https://twitter.com/remi_rousselet

まとめ

いかがでしたでしょうか。
この記事のように、手順を視覚化しておくだけで、かなり効率が上がると思います。
アプリ・カラーのテーマは大枠は使いまわせると思います。(もちろん詳細部分は違う)
また、自分で作ったカスタムWidgetも、どのアプリでも使いまわせそうなものは、分けておいてコピペするのが効率がいいかな。

また何かあったら追記するかもしれません。
アドバイス・コメントをお待ちしております。