概要
どうも、@daiki1003です!今回の記事では、新しくflutter create
をしたら
無条件でやっておきたい設定をまとめてみましたので読んでいただけると幸いです。
こういった類のものは規模が大きくなってくるにつれて
導入が難しくなってくるものも多いのでできるだけ早いうちに
やっておくのが吉です!
また、うちのプロジェクトではこれもやってるよーみたいなのがあれば
ぜひ@daiki1003まで教えてください!
それでは行ってみましょー!
🎨 全プロジェクト必須
asdfの設定
まずは、Flutterなどのバージョン管理ツールであるasdfを導入します。
複数人で開発するとなると各々で使ってるバージョンが異なると
「俺の手元ではコンパイル通らないよー」みたいな悲劇が起こりかねません。
なので、Flutterのバージョン管理ツールは必須です。
導入方法については、過去記事を参照していただければと思います。


linterの設定
次に、linter
の導入です。
linter
は最悪なくてもギリギリ致命傷レベルで済みます。
が、なるべく早く導入しておくことで
– 効率的なコードの書き方がわかる(いわゆるEffective Dart
)
– 実行時のメモリ効率化や動作の軽量化に役立つ
というメリットを享受することが出来ます。
また、導入の際は出来るだけ厳しいルールを適応するのをお勧めしています。
導入方法については、過去記事を参照していただければと思います。


また、これに関してはプロジェクト後半になるにつれて導入するのが
大変になるので気付いた時が最善の導入タイミングだと思ってください!
もし、どうしても面倒くさければ僕がやるので
DMお待ちしております!
import_sorter
次に、import_sorter
パッケージの導入です。
import
の順番は、適当で良いと言うわけではありません。
導入方法やどんな変更内容になるかについては、過去記事を参照していただければと思います。


GitHub Actionsの設定
次に、GitHub Actions
を導入しましょう。


linter
やimport_sorter
を導入した方は
これらがPR作成時にも守られているかを確認するstepを追加しましょう!
# 静的解析 $ flutter analyze # 正しくフォーマットされているか $ dart format -o none --set-exit-if-changed . # importが正しくソートされているか $ dart run import_sorter:main --exit-if-changed
細かい書き方についてはここでは割愛させていただきます。
🎯 中規模程度プロジェクト必須
さて、ここからは全プロジェクト、と言うほどではないけど
中規模程度のプロジェクトであれば必須の設定について解説します。
flutter_genの設定
まずは、@wasabeef_jpさんが
作成された flutter_gen
パッケージの導入です。


Swiftエンジニアの方は、R.swift
のようなもの、といえば通じると思います。
画像やカラーコードを指定する際に、まさか文字列や直値で指定していませんか?
それは、以下2点でお勧めできません。
– 文字列はコンパイルセーフでないので、あまりお勧めできない
– 未使用となったファイルを削除する際に本当に削除して良いか確かめる術がない
が、flutter_gen
を導入すればその心配は無くなります。
– リソース指定が、定数ベースになるのでコンパイルセーフ
– 使用中のファイルを削除すればコンパイルエラーとなるため安心してリソースを削除出来る
Flavor対応
Flavorとは各環境のことを指しています。develop
/ staging
/ production
など。
なんでこんな美味しそうなネーミングなのかは知りません。
ある程度以上の規模のアプリになると少なくとも開発環境と本番環境は分けた方が
良いでしょう。
分ける方法は以下の記事が参考になります。
(Flutter 3.7~
)


また、僕はまだ本格的に使ったことがないのですが flutter_flavorizr
と言う
簡単にしてくれるパッケージもあるので使ってみるのもありだと思います!


Codemagicで自動ビルド
エンジニア以外のメンバーが参画することになった場合は、その方にも触ってもらえるように
しなければいけません。
その際に、必要になってくるのがCodemagic
などのCI/CDツールです。


個人的には、Flutterプロジェクトは全部Codemagicで良いのでは、と思っています。
– XcodeやFlutterのアップデート対応も早い
– 困ったとき、チャットも割とすぐに返信あり
などの点もお勧めポイントです!
Routing方法の変更
最後に、ルーティングの方法についてです。
皆さんは、ページからページへ遷移する際にどんな方法を使っていますか?
多くのプロジェクトでは、 pushNamed
の様に各ページに名前をつけて
遷移していると思います。
個人的には、この方法は結構手間が多いなーと思っています。
名前定数作ったり、 onGenerateRoute
などに登録しなければいけなかったり。
そんな手間を解消してくれるのが今回の方法。
下記記事を参考にしていただければと思います!
この記事は嬉しいことに、多くの反響を呼びいろんな方に導入してもらっています。
ぜひ皆さんのプロジェクトでもやってみてください!


Twitterフォローお願いします
「次回以降も記事を読んでみたい!」「この辺分からなかったから質問したい!」
そんな時は、是非Twitter (@daiki1003)やInstagram (@ashdik_flutter)のフォローお願いします♪
Twitterコミュニティ参加お願いします
Twitterコミュニティ「Flutter lovers」を開設しました!参加お待ちしております😁
☕️ Buy me a coffee
また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです!
コメント