Androidアプリ開発環境の構築～デモアプリで実機動作確認

#  Flutter開発環境セットアップ手順（Windows編）

「Windows+Androidのアプリ開発を始める人に向けたおすすめソフトを教えて」とchatGPTに聞きました。
ツール | 特徴
|---|---|
Flutter | 超高速開発！AndroidとiOS両方作れる（おすすめ）
Android Studio | ガチネイティブAndroid開発（細かく制御できる）

《 Flutterおすすめ理由 》
・コードが簡単
・デザインもすぐ整えられる
・スマホ2台持ち（Android/iPhone）にも対応しやすい

ということで、開発ツールはFlutterを選択


## ０．アプリを動かすまでの流れ

１．Flutter SDK をインストールする
２．Android Studio をインストールする
３．AndroidStudioにFlutterプラグインを入れる
４．Androidエミュレータ or 実機をつなぐ
５．簡単なプロジェクトを作って動かす

《 Flutterで開発する場合でも、Android Studioインストールは必要 》
なぜなら、
<b>Androidビルドツールが必要だから</b>
➡ Flutterは最終的にAndroidアプリ（APK）に変換するため、内部でAndroid SDKを使う
<b>エミュレータ（仮想スマホ）が必要だから</b>
➡ 実機がない場合にテストには、Android Emulatorがセットで必要
<b>ドライバ類の管理も一括でできるから</b>
➡ スマホ接続用のADBドライバなども一緒にインストールされる

--------------------------------

## １．Flutter SDKをインストールする
##### １）Flutter公式ページからダウンロード

https://flutter.dev/multi-platform/desktop

ページの下の方の　Install
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/fa9d93a0-395e-4ea0-bd22-952836c5afe0.png)

Windowsを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/b448ffd2-629a-43ad-834a-76fa565d60ed.png)

Androidを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/418a8a47-9ffb-4a12-98cf-29ce21d65fa0.png)

ページの中程の flutter_windows_x.xx.x-stable.zip　を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/bbad36fd-3ac8-4cd4-977f-06d280e95c1f.png)

##### ２）Zipファイルを展開して、下記のようなフォルダに置く
```makefile
C:\src\flutter
```
・この時、必ずパスにスペースがない場所におくこと
・たとえば `C:\Program Files\flutter` とかは不可（スペースが入っているので）

##### ３）環境変数PATHを通す
① Windowsの検索バーで「環境変数」と検索
②「システム環境変数を編集」を開く
③「環境変数（N）」ボタンを押す
④「ユーザー環境変数」または「システム環境変数」の Path を選んで「編集」
⑤ 新規追加で `C:\src\flutter\bin`を登録。これでターミナル（コマンドプロンプト）から flutter コマンドが使える
⑥ コマンドプロンプトに下記を打ち、Flutterのバージョン情報が表示されたら成功
```bash
flutter --version
```
cmdの画面参考
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/8f882f38-0d2b-4c42-b08c-26b3946509f6.png)

-------------------------------------

## ２．Android Studioをインストールする
AndroidStudio公式サイト

https://developer.android.com/studio

ダウンロードできたら、そのままインストーラーを起動してインストール

・基本的に「Next」「Next」
・最初の設定（標準設定）も「Standard」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/9286b8cc-c4bd-4833-b090-2842ceb1697d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/aea29132-b178-4d3a-a204-42f70b91ad2c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/1e21a7ae-9831-48dd-bb21-2cdffbdff041.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/4e7967ad-f650-4646-bd6a-4c69e4c78916.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/b1ddf69c-fba2-4d17-927a-16a0d0414ffc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/c220b27c-9085-4ffc-99a5-f93d0c07a56c.png)
-----------------------------
ここから初期設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/95526e16-895e-4cec-ad32-8ce30a2db546.png)
　↑　改善にご協力くださいの選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/f796a6a6-4b8a-44ee-821a-6cef953fbbab.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/e6db615c-52f8-4529-92f3-8a6ca67153cb.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/5388aa5e-dedc-4bca-9345-d0cc8b51dc5f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/8d1426a7-830a-441e-a8c4-35b6381882dc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/d561a3fa-bc5a-48c3-b375-4a04da5b67ea.png)
コンポーネントのDLは少し時間がかかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/2ee3baf4-d6ff-4e3a-9dc9-b2a6224b771b.png)
完了

## ３．Flutterプラグインを入れる
✅ Flutterプラグイン入れないとFlutterプロジェクトを作成できない

１）Android Studioが起動したら、左カラムのメニューから Plugins を選択
２）Flutterプラグインを選択
３）インストール（※自動でDartプラグインも入る）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/b78a6812-d44b-4a62-bab2-017f8a66aa71.png)

プラグインのインストール後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/2a1f2ac7-ac2b-4f48-a770-8fa8dbbb51e7.png)


Restart IDEでFlutterプロジェクトが選択できるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/f55ebda1-a9a4-44e1-ba6e-d1075caa975f.png)

## ４．Androidエミュレータ or 実機をつなぐ

#### １）[New Flutter Project]を選択してプロジェクトを新規作成
先ほど１-３）で設定した環境変数PATHの`C:\src\flutter\bin`の`C:\src\flutter`までを、`Flutter SDK path:`のテキストボックスに入力して`[Next]`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/1c01ca2b-00c9-4d94-9471-294cc27604e8.png)
次の画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/8f4c5098-d1bf-438f-8f2b-90f707d530a2.png)
ここではそれぞれ次の通りに選択して`[Create]`
項目 | 設定
|---|---|
Project type | Application
Organization | com.example（そのままOK）
Android language | Kotlin
Platforms | Android と iOS だけチェック

プロジェクトが新規作成され、`main.dart`が開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/5e52792e-3fe4-48be-98f0-a298ac001ffa.png)

## ２）スマホをPCに接続して実機デプロイ

#### ① スマホをUSBケーブルでパソコンに接続
USBつないだ際に出てくる選択肢では`ファイル転送 / Android Auto`を選択

#### ②スマホ側で「USBデバッグ」をONにする
【Androidスマホの操作】
:gear: `設定`→`デバイス情報（端末情報）`
　↓
`ビルド番号`を7回連打
　↓
`開発者モードを有効化`のテキストが１秒ほど表示
　↓
:gear: `設定`→`システム`→`詳細設定`→`開発者オプション`を開く
　↓
`USBデバッグ`を `ON`にする

これでPCとスマホがBLE開発モードでつながる

## ５．スマホでかんたんなアプリを動かしてみる
#### ③Android Studioに戻る (さっきの②の続きから)
PCとの接続を許可したら、AndroidStudioの上部バーにスマホの機種名が表示されたのを確認、またはプルダウンで選択して、右にある▶（実行）ボタンを押す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/5de63410-f494-4d47-b511-02b1efa5da2b.png)

初回ビルドは5分以上かかったが、次回以降のビルドでは数秒～１分（※）で完了する。
※）ライブラリの更新やインストールで時間がかかるなど、状況と内容でビルド完了時間に差がある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/19ea06e7-7e69-4333-b5bb-a1c18cb4214d.png)
スマホに、新規作成時のデモ画面が表示。
右下の`＋`をタップするごとに中央の数字がカウントアップされることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4018803/28c11389-eb09-4f1d-8b8a-2d4a823d3b8a.png)

Androidアプリ開発環境の構築とデモアプリの動作確認は以上。
次の項では、スマホとPicoWをBLE接続する簡単なアプリを作って動かしてみる。