Flutter CLI (Flutter Roadmap Flutter CLI)

## はじめに
Flutterを網羅的に学習するにあたって[Roadmap](https://roadmap.sh/flutter)を使って学習を進めることにしました。

この記事では、Flutter初学者やこれからFlutterを学習し始める方に向けて、Flutter CLIについてまとめています。

RoadmapはFlutterだけでなく、他の言語やスキルのロードマップも提供されており、何から学習して良いか分からないと悩んでいる方にとって有用なサイトになっています。
ぜひ[Roadmap](https://roadmap.sh/)を利用して学習してみてください。

## Roadmapとは

簡潔に言えば、Roadmap.shは学習者にとっての**ガイドブック**であり、**学習の方向性を提供する学習ロードマップサイト**です。

初心者から上級者まで、ステップバイステップでスキルを習得するための情報が提供されています。

学習の進め方が分かりやすく示されているだけでなく、個々の項目に参考資料やリソースへのリンクも提供されているので、学習者は目標を設定し、自分自身のペースで学習を進めることができます。

## Flutter CLI
FlutterロードマップFlutter CLIでは以下の3つのサイトが紹介されています。興味のある方はぜひお読みください。

- The Flutter command-line tool: https://docs.flutter.dev/reference/flutter-cli
- CLI Packages in Flutter: https://dart.dev/server/libraries#command-line-packages
- Get started with Flutter CLI: https://dart.dev/tutorials/server/get-started

## Flutter CLIとは

Flutter CLI（Command Line Interface）は、Googleによって開発されたFlutterのコマンドラインツールです。Flutter CLIを使用することで、ターミナルやコマンドプロンプトからFlutterプロジェクトの作成、ビルド、テスト、デプロイなどの操作を行うことができます。CLIを使用することで、開発プロセスを効率化し、自動化することができます。

## コマンド一覧
### 1. Flutterの環境診断
開発環境がFlutterのプロジェクトをビルドおよび実行する準備が整っているかどうかをチェックするために使用されます。主に以下の3つの目的で利用されます。
- **依存関係の確認**: 依存関係が正しくインストールされているのかをチェック
- **設定の確認**: 開発環境が正しく設定されているかどうかのチェック
- **警告と解決策の提示**: 設定に関する問題を検出した場合、警告メッセージを表示し、解決策を提供

`-v`をつけることで、詳細な情報を確認することができます。

```sh
flutter doctor # flutter doctor -v で詳細情報を見れます

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.2, on macOS 13.3.1 22E261 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.80.1)
[✓] Connected device (2 available)
[✓] Network resources

• No issues found!

```

### 2. SDKバージョンを確認
現在使用しているSDKバージョンを確認することができます。

```sh
flutter --version
Flutter 2.5.3 • channel dev • https://github.com/flutter/flutter
Framework • revision 83dd176777 (12 days ago) • 2020-09-22 12:04:44 -0700
Engine • revision 2abe69c608
Tools • Dart 2.10.0 (build 2.10.0-136.0.dev)
```

|出力情報|内容|
|---|---|
|**Flutter 2.5.2**| インストールされているFlutterバージョン|
|**channel dev**| 使用しているFlutterのリリースチャネル|
|**https://github.com/flutter/flutter**| ソースコードがホストされているリポジトリのURL|
|**Framework • revision 83dd176777**| Flutterフレームワークの最新コミットです|
|**Engine • revision 2abe69c608**| Flutterエンジンの最新コミットです|
|**Tools • Dart 2.10.0**|使用しているDart言語のバージョン|


### 3. バージョンをアップデート
Flutterフレームワークとその関連ツールを最新バージョンにアップデートすることができます。
```sh
flutter upgrade
```

### 4. バージョンをダウングレード
Flutterフレームワークを特定のバージョンにダウングレードすることができます。
ダウングレードにより、特定のバージョンに戻ることで問題を解決したり、コードの動作を維持したりすることができます。
```sh
flutter downgrade <バージョン>
```

### 5. 使用しているFlutter SDKのチャネルを確認
現在使用しているFlutter SDKチャネルを確認します。
```sh
flutter channel
Flutter channels:
  master
  dev
  beta
* stable
```

より最新のソースを使用したければ、`masterチャネル`に切り替え、最も安定したソースを使用したければ`stableチャネル`に切り替えます。
|チャネル|内容|
|---|---|
|master|GitHubのmasterブランチに相当するもので、最新のソースがコミットされているチャンネルになります。最新である反面、安定さには欠けるチャンネルというのが特徴です。|
|dev|master channelのうち、テストに通過したソースがこのチャンネルです。masterに比べてテストを通過している分、安定性は増しているチャンネルと言えます。|
|beta|dev channelのうち、品質が高いと認められたものが月初に更新されるチャンネルです。これもdev channelからより良いものを選んで追加されている分、安心して使えるチャンネルになっていると言えます。|
|stable|Flutterをインストールした時にデフォルトで選択されているチャンネルがstable channelです。これは最も安定性が高いので利用が推奨されているチャンネルでもあります。stable channelでは四半期に一度の更新となっているようです。|

### 6. チャンネルの変更
オプションで指定したチャンネルに変更することができます。

```sh
flutter channel beta # beta版に切り替える
```

### 7. 実行可能なデバイスを確認
Flutterアプリを実行するために利用可能なデバイスの一覧を確認することができます。
エミュレータの場合は、起動した状態でないと表示されません。
```sh
flutter devices

3 connected device:

macOS (desktop) • macos  • darwin-arm64   • macOS 13.3.1 22E261 darwin-arm64
Chrome (web)    • chrome • web-javascript • Google Chrome 115.0.5790.170
iPhone 12 (mobile) • ABCD1234-5678-1234-5678-ABCD1234EFGH • ios • com.example.myapp
```

### 8. Flutterの設定情報を管理する

`~/.flutter_settings`にある設定ファイルを更新することができます。
このファイルを編集することで、個別の設定を指定したり、デフォルトの動作を変更したりすることができます。


```sh
# Flutter Webを有効化
flutter config --enable-web
```

```sh
# Flutter Desktop Linuxを有効化
flutter config --enable-linux-desktop
```

```sh
# Flutter Desktop macOSを有効化
flutter config --enable-macos-desktop
```

```sh
# Flutter Desktop Windowsを有効化
flutter config --enable-windows-desktop
```

### 9. Flutterプロジェクトを新規に作成する
Flutterプロジェクトを新規に作成することができます。オプションの最後に出力先のディレクトリ名を指定します。

```sh
flutter create -t app --org com.example --project-name ¥
example -i swift -a kotlin ¥
--description "Example Project" ¥
./example.app
```

|オプション|内容|
|---|---|
|-t, --template=|`app`, `module`, `package`, `plugin`のいずれかを指定する デフォルトはapp|
|--org|オーガナイゼーションを指定する デフォルトはcom.example|
|--project-name|Flutterプロジェクト名を指定する|
|-i, --ios-language|iOS向けプラットフォーム側のコードの言語で`objc`, `swift`のいずれかを指定する デフォルトはswift|
|-a, --android-language|Android向けプラットフォーム側のコードの言語で`java`, `kotlin`のいずれかを指定する デフォルトはkotlin|
|--description|プロジェクト説明文 デフォルトは"A new Flutter project."|

### 10. クリーン
Flutterプロジェクト内の一時ファイルやキャッシュをクリーンアップするためのコマンドです。
このコマンドを実行することで、プロジェクトのビルドや実行に関連する一時ファイルやキャッシュ[^1]が削除され、プロジェクトの状態をリセットすることができます。
```
flutter clean
```

### 11. ライブラリやツールをダウンロードし、プロジェクトに取り込む
pubspec.yaml ファイルに記述された依存関係に基づいてパッケージがダウンロードされ、プロジェクトで利用できるようになります。pubspec.yaml ファイルを更新するたびに実行します。
```sh
flutter pub get
```

### 12. ライブラリの依存関係をツリーで表示
Flutterプロジェクトの依存関係グラフを表示することができます。このコマンドを実行すると、プロジェクト内の各パッケージがどのように依存し合っているかを可視化して表示します。
```sh
flutter pub deps
```

### 13. ビルド
ターゲット環境を指定してビルドすることができます。ビルドしたものは`./build/⚪︎⚪︎⚪︎`に生成されます。
|オプション|内容|
|---|---|
|aar|Android ARchiveファイル|
|apk|Android APKファイル|
|appbundle|Android App Bundleファイル|
|bundle|Flutterのフォントや画像等のバンドルのビルド(flutter_assetsディレクトリ以下, DartのJIT用バイトコード)|
|ios|iOS向けビルド|
|ios-framework|.framework向けビルド|
|web|Webアプリ向け|
|macos|macOSデスクトップ向け(デフォルトはリリースモードでのビルド)|
|linux|Linuxデスクトップ向け(デフォルトはリリースモードでのビルド)|
|windows|Windowsデスクトップ向け(デフォルトはリリースモードでのビルド)|

オプションを付けることで、様々な機能が利用できます。

**ターゲットアーキテクチャを指定してビルドする**
```sh
flutter build apk --target-platform=android-arm64
```

**ビルド時のサイズ情報を確認する**
```sh
flutter build ios --analyze-size
Building macOS application...                                           
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  sample.app                                                               35 MB
  sample.app/
    Contents/
      _CodeSignature                                                        9 KB
      MacOS                                                                66 KB
      Resources                                                           246 KB
      Frameworks                                                           34 MB
      Dart AOT symbols accounted decompressed size                          3 MB
        package:flutter                                                     2 MB
        dart:core                                                         306 KB
        dart:typed_data                                                   221 KB
        dart:ui                                                           191 KB
        dart:async                                                        115 KB
        dart:collection                                                   110 KB
        dart:convert                                                       58 KB
        dart:isolate                                                       40 KB
        dart:io                                                            38 KB
        package:vector_math                                                33 KB
        dart:developer                                                     10 KB
        package:typed_data/
          src/
            typed_buffer.dart                                               7 KB
        package:collection/
          src/
            priority_queue.dart                                             5 KB
        dart:math                                                           4 KB
        dart:ffi                                                            4 KB
        package:sample/
          main.dart                                                         3 KB
        dart:vmservice_io                                                   2 KB
        dart:mirrors                                                       668 B
        dart:nativewrappers                                                382 B
        Never                                                               63 B
      Info.plist                                                            2 KB
▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
```

### 14. アプリ実行

devicesで表示されているターゲットにビルドからインストールまで一連の作業を実行することができます。
```sh
flutter run
```

- **リリースモード[^2]で実行する**
```sh
flutter run --release
```

-  **デバッグモード[^3]で実行する**
```sh
flutter run --debug
```

- デバイスIDは`flutter devices`で確認した値（左から2列目）です。
```sh
# -d　オプションを使用してターゲットデバイスを指定する devicesで表示されているデバイスIDを指定する
flutter run -d (デバイスID)
```

```sh
# 再ビルドなしでアプリを実行する(既にビルド済みの場合のみ)
flutter run --no-build
```

```sh
# アプリ実行中の詳細ログを表示する
flutter run --verbose
```

### 15. インストール
ビルド済みのインストールパッケージをデバイスにインストールすることができます。
```sh
flutter install
```

### 16. ユニットテスト
testディレクトリのユニットテストを実行することができます。
```sh
flutter test
```

### 16. インテグレーションテスト
アプリのインテグレーションテストを実行することができます。
```sh
flutter drive --target=test_driver/sample_perf.dart
```

### 17. スクリーンショットを撮る
現在使用しているデバイスのスクリーンショットを撮ることができます。
```sh
flutter screenshot # 出力先を指定するには --outオプションを利用します
```

### 18. ヘルプメッセージを表示する
コマンドを入力した後に`--help`を付与するとそのコマンドに対するヘルプメッセージを表示することができます。
```sh
flutter --help
flutter run --help
```





## 参考資料
https://qiita.com/kurun_pan/items/f9251b1827ce9dca9e14

https://docs.flutter.dev/reference/flutter-cli

https://vector-ium.com/flutter-channel/

https://hiyoko-programming.com/1590/

https://dev.classmethod.jp/articles/master-the-flutter-devicesflutter-run-command-in-flutter-app-development/


[^1]: **キャッシュ**
閲覧した際にデータをパソコン内に一時的に保存して、再度閲覧する際に素早く表示するための機能です。
[こちら](https://wa3.i-3-i.info/word139.html)にわかりやすい記事があったので、是非読んでみてください。 

[^2]: **リリースモード**
アプリをリリースする準備ができたときに使用するビルドモードです。リリースしたときのパフォーマンスを確認することができます。
リリースに不要なデバッグ機能等を外してアプリのパフォーマンスが最適化されるので、ホットリロード機能をはじめとするデバッグを行うことはできません。
Android Studio のメニューを使用する場合は、「Run」>「Flutter Run ‘main.dart’ in Release Mode」を押すことで、Release Mode（リリース モード）でのビルドができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/d083e30e-cda9-822e-9f72-072810efd64d.png)


[^3]: **デバッグモード**
開発でバグ修正（デバッグ）するときに使用するビルドモードです。
コードの変更をすぐに反映するホットリロード機能は、このモードでのみ使うことができます。また、ブレークポイントを設定することもできます。
このように、デバッグするための機能が使えるようになっていますが、その分、アプリは最適化されないので、実行速度などパフォーマンスは良くないです。
Android Studio のメニューを使用する場合は、上部にある▷ボタンか、虫マークのボタンを押すことで、Debug Mode（デバッグ モード）でのビルドができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3368449/b086eee6-ab80-0789-076f-0d772ad9d924.png)