Flutter と Dart 

# はじめに

本ページでは、Flutter 上でのアプリを開発するために、チュートリアルの内容に従った開発の方法についてご紹介します。

## Dart

https://dart.dev/

今回は Flutter のインストールで勝手にいろいろと入るので、
環境構築中に行うことは特になしです。

## Flutter

https://flutter.dev/

### チュートリアルページ

* https://dartpad.dev
  * Web 上で Dart を書きながらいろいろと実験ができる。本ページでは割愛。
* https://docs.flutter.dev/get-started/install
  * インストールに関するページ。
* https://docs.flutter.dev/get-started/editor
  * エディターのセットアップのページ。本ページでは Visual Studio Codeを中心に解説。

## このページでの環境について

環境は Windows 10 を想定しています。
また、実際に Andorid 端末の実機をパソコンに繋げて使います。

# インストール

## 1. Git for Windows

事前に必要なのでインストールします。

https://git-scm.com/download/win

すでに入っている場合は不要です。

## 2. Flutter のインストール

下記のページから ZIP ファイルをダウンロードしてインストールします。
(このページの記載時点では、 flutter_windows_3.3.9-stable.zip)

https://docs.flutter.dev/get-started/install/windows#get-the-flutter-sdk

落として来たら ZIP ファイルを解凍し、作成されたフォルダを C:\flutter などに移動します。

※インストールページの注釈で、特殊文字やスペースがあるパスに展開しない、とあるので、それ以外のパスを指定する。
　`C:\Program Files` 以下とかには置かない方がいい。

## 3. 環境変数の設定

インストールをしたら、下記手順に従ってパスを通します。

1. Windows の検索(スタートボタン横の虫眼鏡マーク)を開き、 `env` と入力する。
1. 出てきた `システム環境変数の編集` をクリックする。
1. 下にある `環境変数` のボタンをクリックする。
1. ユーザー環境変数の方の `Path` を選択し、 `編集` ボタンをクリックする。
1. `新規` ボタンを押して、先ほどの `Flutter` のインストール先のパス + `\bin` を記載して `OK` ボタンを押す。

## 4. flutter doctor の実行

flutter をインストールしたパスのところで `flutter doctor` を実行します。
Git Bash を新たに立ち上げて下記のコマンドを実行してください。
(環境変数追加前の Git Bash を使うと環境変数の追加が有効になっていない)

``` bash
$ cd  /c/flutter
$ flutter doctor
```

## 5. Android Studio のインストール

下記から Android Studio をダウンロードしてインストールします。

https://developer.android.com/studio

終わったら flutter doctor を実行して、Android Studio が読み込めているか確認します。

``` bash
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
(中略)
[√] Android Studio (version 2021.3)
```

読み込めていなかったら、下記コマンドを実行して、Android Stdio のパスを <directory> で指定してください。

``` bash
$ flutter config --android-studio-dir <directory>
```

## 6. Android デバイスのセットアップ

Android 端末の開発者オプションを設定します。
USB Debuggingを有効にします。詳細は下記のサイトに書いてあります。

https://developer.android.com/studio/debug/dev-options

また、 Google USB Driver をインストールしてください。

1. Android Studio を起動する。
1. メニューから、`SDK Tools` > `SDK Manager`を選択する。
1. `SDK Tools` タブを開く。
1. `Google USB Driver` のチェックを入れて、`OK` を押してインストールする。

これについても、下記のページに詳しく書いてあります。

https://developer.android.com/studio/run/win-usb

実際に Android 端末をつなげて `flutter devices` を実行し、 Android 端末と接続できているか確認してください。

``` bash
$ flutter devices
4 connected devices:

** ** (mobile)    • ********** • android-arm64  • Android ** (API **)
(以下略)
```

## 7. Android エミュレータの設定

まずはPCの VM アクセラレーションを有効にしてください。
VM アクセラレーションの方法は環境によって変わるので、下記のページを読んで方法を確認してください。

https://developer.android.com/studio/run/emulator-acceleration#vm-windows

今回の手順は以下の通りです。

1. Windows の `設定` から、 `アプリと機能` を選択する。
1. 右側の `プログラムと機能` を選択する。
1. `Windows の機能の有効化または無効化` を選択する。
1. `Windows ハイパーバイザー プラットフォーム` をチェックして `OK` を押す。
1. OS を再起動する。

次に、 Android Emulator のデバイスを作成します。
1. Android Studio を起動する。
1. メニューから、`SDK Tools` > `Device Manager`を選択する。
1. `Create device` を選択する。
1. `Choose device definition`から利用したいハードウェアの設定を選択する。
1. `Next` を押す。
1. `Select System Image` の中にあるOSのイメージから、使いたいOSをダウンロードする。
   (ダウロードマークを押す)
1. ダウンロードできたら、そのイメージを選択して `Next` を押す。
1. 確認画面で構築するエミュレータの内容を確認して `Finish` を押す。

動作確認は、 `Device Manager` から作成したデバイスの起動ボタン(右向き三角)を押して起動できるか確認します。

## 8. 各種ライセンスの同意

まず、cmdline-tools をインストールします。

``` bash
$ cd (Android SDK のフォルダ)
$ ./tools/bin/sdkmanager.bat --install "cmdline-tools;latest"
```
`JAVA_HOME` が設定されていないと、sdkmanager.bat が動かないので、
その場合は環境変数から設定してください。

その後、`flutter doctor --android-licenses` を実行して、ライセンスの認証となります。

``` bash
$ flutter doctor --android-licenses
```

各ライセンスについて、ライセンスに同意する場合はyを押して承認してください。

その後、`flutter doctor` を実行し、環境に問題がないことを確認してください。

``` bash
$ flutter doctor
```

## 9. VS Code のインストール

VS Code をインストールします。

https://code.visualstudio.com/

## 10. Flutter と Dart のプラグインをインストール

VS Code を起動し、下記の手順で Flutter のプラグインをインストールします。

1. 左側の Extention のマークをクリック、または、 Ctrl + Shift + X を押す。
1. 検索ボックスに Flutter と入力して Flutter を選択してインストール。

Dart のプラグインは勝手に入ります。
終わったら VS Code は再起動(閉じて開く)しておいた方がお勧めです。

# デモアプリケーションの作成

基本に忠実に、下記のページに記載されている内容を実行。

https://docs.flutter.dev/get-started/test-drive

## 1. プロジェクトの作成

1. VS Code を開く
1. View > Commmand または Ctrl + Shift + P を押す。
1. `Flutter: New Project` と入力する。(打っている途中で下に候補が出てくるのでクリック)
1. `Application` を選択する。
1. 適当なフォルダ(ここでは `my_app`)作成する。
1. プロジェクト名を聞かれるので、`my_app`と入力してEnterを押す。

成功すれば `main.dart` というファイルが開かれているはずです。

## 2. アプリの実行

基本的に、メニューの`Run` > `Start Debugging` を選べば動くはず。

しばらくすると Android エミュレーター上でDemoアプリが動きます。

![flutter_demo_20230219_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250468/9b89edd7-ade1-14de-f545-6e61235e47a5.png)