【Flutter】プロジェクトを作ったら無条件でやっておきたい8個の設定

Dart

概要

どうも、@daiki1003です!

今回の記事では、新しくflutter createをしたら
無条件でやっておきたい設定をまとめてみましたので読んでいただけると幸いです。

こういった類のものは規模が大きくなってくるにつれて
導入が難しくなってくるものも多いのでできるだけ早いうちに
やっておくのが吉です!

また、うちのプロジェクトではこれもやってるよーみたいなのがあれば
ぜひ@daiki1003まで教えてください!

それでは行ってみましょー!

🎨 全プロジェクト必須

asdfの設定

まずは、Flutterなどのバージョン管理ツールであるasdfを導入します。

複数人で開発するとなると各々で使ってるバージョンが異なると
「俺の手元ではコンパイル通らないよー」みたいな悲劇が起こりかねません。
なので、Flutterのバージョン管理ツールは必須です。

GitHub - asdf-vm/asdf: Extendable version manager with support for Ruby, Node.js, Elixir, Erlang & more
Extendable version manager with support for Ruby, Node.js, Elixir, Erlang & more - asdf-vm/asdf

導入方法については、過去記事を参照していただければと思います。

【Flutter】え、まだfvm使ってるの?これからはasdfじゃない?
すみません、ちょっと煽ってしまいました笑 本記事では、asdfというバージョン管理ツールの導入方法を解説したいと思います。 先日、同僚から「fvmよりasdfを使いませんか?」と言う提案が。 それまで全く聞いた事なく、...

linterの設定

次に、linterの導入です。

linterは最悪なくてもギリギリ致命傷レベルで済みます。
が、なるべく早く導入しておくことで

– 効率的なコードの書き方がわかる(いわゆるEffective Dart)
– 実行時のメモリ効率化や動作の軽量化に役立つ

というメリットを享受することが出来ます。
また、導入の際は出来るだけ厳しいルールを適応するのをお勧めしています。

導入方法については、過去記事を参照していただければと思います。

【Dart/Flutter】lintの導入方法と対応した警告の修正例を全力で公開してみたよ
先日、ある程度大きくなった自分のFlutterプロジェクトにlintを入れてみました。 悪い予感はしてましたが、まぁ出てくるわ出てくるわ笑 警告5,000みたいな感じでした。 ただ、僕自身こう言うのをちまちま直していく作業...

また、これに関してはプロジェクト後半になるにつれて導入するのが
大変になるので気付いた時が最善の導入タイミングだと思ってください!

もし、どうしても面倒くさければ僕がやるので
DMお待ちしております!

import_sorter

次に、import_sorterパッケージの導入です。

import_sorter | Dart package
Automatically organize your dart imports

importの順番は、適当で良いと言うわけではありません。

Effective Dart: Style
Formatting and naming rules for consistent, readable code.

導入方法やどんな変更内容になるかについては、過去記事を参照していただければと思います。

【Flutter】神パッケージimport_sorterの使い方とflutter_genが消えてしまう一時的ワークアラウンド
僕のプロジェクトでは、import_sorterパッケージを使っています。 import文は出来る限りソートしておきたいわけですが、 かと言ってPRの度に目を凝らして毎回importを確認するのは大変です。 そ...

GitHub Actionsの設定

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

Actions
GitHub Actionsを使用することで、高機能のCI / CDですべてのソフトウェアワークフローを簡単に自動化できます。 GitHubから直接コードをビルド、テスト、デプロイします。コードレビュー、ブランチ管理、問題のトリアージを希望どおりに機能させます。

linterimport_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パッケージの導入です。

flutter_gen | Dart package
The Flutter code generator for your assets, fonts, colors, … — Get rid of all String-based APIs.

Swiftエンジニアの方は、R.swiftのようなもの、といえば通じると思います。

画像やカラーコードを指定する際に、まさか文字列や直値で指定していませんか?

それは、以下2点でお勧めできません。
– 文字列はコンパイルセーフでないので、あまりお勧めできない
– 未使用となったファイルを削除する際に本当に削除して良いか確かめる術がない

が、flutter_genを導入すればその心配は無くなります。

– リソース指定が、定数ベースになるのでコンパイルセーフ
– 使用中のファイルを削除すればコンパイルエラーとなるため安心してリソースを削除出来る

Flavor対応

Flavorとは各環境のことを指しています。
develop / staging / productionなど。
なんでこんな美味しそうなネーミングなのかは知りません。

ある程度以上の規模のアプリになると少なくとも開発環境と本番環境は分けた方が
良いでしょう。

分ける方法は以下の記事が参考になります。
(Flutter 3.7~)

【Flutter 3.19対応】Dart-define-from-fileを使って開発環境と本番環境を分ける

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

flutter_flavorizr | Flutter package
A flutter utility to easily create flavors in your flutter application

Codemagicで自動ビルド

エンジニア以外のメンバーが参画することになった場合は、その方にも触ってもらえるように
しなければいけません。

その際に、必要になってくるのがCodemagicなどのCI/CDツールです。

Codemagic - CI/CD for Android, iOS, Flutter and React Native projects
Boost your mobile app development with continuous integration and delivery. Replace manual intervention and build, test and deliver mobile apps 20% faster with ...

個人的には、Flutterプロジェクトは全部Codemagicで良いのでは、と思っています。

– XcodeやFlutterのアップデート対応も早い
– 困ったとき、チャットも割とすぐに返信あり

などの点もお勧めポイントです!

Routing方法の変更

最後に、ルーティングの方法についてです。
皆さんは、ページからページへ遷移する際にどんな方法を使っていますか?

多くのプロジェクトでは、 pushNamedの様に各ページに名前をつけて
遷移していると思います。

個人的には、この方法は結構手間が多いなーと思っています。
名前定数作ったり、 onGenerateRouteなどに登録しなければいけなかったり。

そんな手間を解消してくれるのが今回の方法。
下記記事を参考にしていただければと思います!
この記事は嬉しいことに、多くの反響を呼びいろんな方に導入してもらっています。
ぜひ皆さんのプロジェクトでもやってみてください!

【Flutter】もうnamedRouteは使わない!僕が全力で勧めたいルーティング方法をサンプル付きで解説してみた
皆さん、ページ間の遷移はどんな方式でやっていますか? Navigator2.0ですか? ...すごい、僕に教えてください🙇‍♂️笑 え、まだpushNamedを使っている? 僕にもそんな時期がありました。 今日はそ...
誰かのお役に立てば。

Twitterフォローお願いします

「次回以降も記事を読んでみたい!」
「この辺分からなかったから質問したい!」

そんな時は、是非Twitter (@daiki1003)Instagram (@ashdik_flutter)のフォローお願いします♪

Twitterコミュニティ参加お願いします

Twitterコミュニティ「Flutter lovers」を開設しました!
参加お待ちしております😁

☕️ Buy me a coffee

また、記事がとても役に立ったと思う人は
コーヒーを奢っていただけると非常に嬉しいです!

コメント

タイトルとURLをコピーしました