はじめに
学習のためにサンプルプロジェクトを立ち上げることは多いですよね？
でもその都度行う最初のセットアップが面倒です。
不要なコメントを消したり、よく使うパッケージを追加したり...。
試行錯誤の末、私なりの簡単な準備方法を見つけたのでご紹介します。
なお、そこまで特別なことはしていないので初心者の方でも簡単に導入できると思います。
記事の対象者
- Flutter初学者の方
- サンプルプロジェクトの環境を簡潔に作成したい方
記事を執筆時点での筆者の環境
- macOS 14.3.1
- Xcode 15.2
- Swift 5.9
- iPhone11 pro ⇒ iOS 17.2.1
- Flutter 3.19.0
- Dart 3.3.0
- Pixel 7a ⇒ Android
1. プロジェクトを作る
まずは新規プロジェクトを作成します。
手順ではVSCodeで行っていますが、標準のターミナルでも大丈夫です。
1-1. ターミナルを開く
VSCodeを起動しメニューのターミナルから「新しいターミナル」を選択
または⌘ + JでもOK
1-2. プロジェクトを作りたいディレクトリに移動
※ ない場合は作成
1-3. 作成コマンドを実行
flutter create -e your_project_name
your_project_nameのところをご自身の作成したいプロジェクト名に変更してください。
今回はflutter create -e simple_appで実行します。
1-4. プロジェクトを開く
中身を確認するとコメントが消えて、尚且つHello World!のみのシンプルなプロジェクトが作成されています。
pubspec.yamlも綺麗な状態ですね。
2. パッケージを入れる
下準備として原本となるpubspec.yamlを用意しておきます。
- 適当なプロジェクトを作って自分がよく使うパッケージをひたすらインストール
- 自分として毎回必ず使うだろうなと思うもの以外はコメントアウト
- pubspec.yamlの原本としてメモ
上記で用意した原本を今回作成したpubspec.yamlにコピペで貼り付けます。
次に今回のプロジェクトで使いたいパッケージのコメントアウトを外してpubspec.yamlの変更を保存すればインストール完了です。
以下に私の原本を載せておきます。
2-1. pubspec.yaml
dependencies:
cupertino_icons: ^1.0.2
derry: ^1.5.0
# dio: ^5.4.3+1
# envied: ^0.5.4+1
flutter:
sdk: flutter
# flutter_hooks:
# flutter_riverpod: ^2.5.1
# flutter_secure_storage: ^4.2.1
# flutter_web_auth_2: ^3.1.1
# freezed_annotation: ^2.4.1
gap: ^3.0.1
# go_router: ^14.1.0
# hooks_riverpod: ^2.5.1
# isar: ^2.1.4
# json_annotation: ^4.9.0
logger: ^2.2.0
# mockito: ^5.4.4
# path_provider: ^2.0.15
# riverpod_annotation:
# shared_preferences: ^2.2.3
# url_launcher: ^6.2.6
# uuid: ^4.4.0
very_good_analysis: ^5.1.0
dev_dependencies:
# build_runner: ^2.4.9
# envied_generator:
flutter_lints: ^2.0.0
flutter_test:
sdk: flutter
# freezed: ^2.5.2
# go_router_builder: ^2.6.2
# json_serializable: ^6.8.0
# riverpod_generator:
# riverpod_lint:
flutter:
# assets:
# - assets/
uses-material-design: true
scripts:
# build_runnerを実行して、同じファイル名があれば古いものを削除する
br: flutter pub run build_runner build --delete-conflicting-outputs
# Gradle デーモンプロセスを終了する => ビルドエラーの解消
gc: pkill -f '.*GradleDaemon.*'
# テストを実行しカバレッジをHTMLで出力してブラウザで開くスクリプト
cov: flutter test --coverage && lcov --remove coverage/lcov.info 'lib/**.g.dart' -o coverage/new_lcov.info --ignore-errors unused && genhtml coverage/new_lcov.info -o coverage/html && open coverage/html/index.html
2-2. analysis_options.yaml
include: package:very_good_analysis/analysis_options.yaml
linter:
rules:
analyzer:
plugins:
- custom_lint
2-3. 【任意】assetsディレクトリを作成
画像などを扱う場合は別途assetsディレクトリを作成します。
2-4. 上記以外のパッケージを入れる場合
直接pubspec.yamlに記述してもいいのですが、その際にちゃんとアルファベット順にしないとリントに指摘されます。
極力はコマンドflutter pub add で追加しましょう。
3. いくつかパッケージの紹介
今回紹介した私のpubspec.yamlの原本に載っているパッケージについてですが、今回はパッケージの紹介記事ではないのでそれぞれのパッケージの説明は割愛させていただきます。
上記で記載されているパッケージは大体メジャーなものだと思います。
riverpodやdio、go_routerなど。
そんな中でもいくつか元からコメントアウトしていないパッケージだけ簡単に説明しておきます。
私の中ではどのプロジェクトでも高頻度で使うと思われるものです。
3-1. gap
gapはレイアウトに間隔を追加するための便利なツールです。
このパッケージを使用すると、ウィジェット間に簡単にスペースを追加することができます。
Spacer()と違い、スペースの間隔を数値で指定できます。
これによりコードの可読性が向上し、レイアウトの調整が容易になります。
3-2. logger
loggerは簡単にログを追加するためのパッケージです。
このパッケージを使用すると、デバッグ情報を表示したりエラーレポートを生成したりすることが可能になります。
print文で出すよりも見やすくかつカスタマイズしたログを出すことが出来ます。
3-3. very_good_analysis
very_good_analysisは、DartとFlutterのためのリントツールです。
簡単に説明するとコードの書き方について細かな指摘をしてくれます。
たとえば
- クラスのコンストラクタでrequiredキーワードがついていると、先頭に配置しないと警告が出る
- クラスにドキュメントコメントがないと警告が出る
現在の職場でvery_good_analysisを導入しているので、慣れのために導入しています。
3-4. derry
derryはスクリプト管理ツールです。
複数のコマンドを一つのスクリプトとして定義してそれを簡単なコマンドで実行できるようにします。
具体的にはpubspec.yamlのscripts:以下に登録されたコマンドがそれに当たります。
詳しくは別の記事で紹介しています。
終わりに
以上、Flutterプロジェクトの最初のセットアップについて解説しました。
この記事があなたのプロジェクト立ち上げの時間を短縮し、開発効率を向上させる一助になれば幸いです。