flutter インストールとテストドライブをやってみた

# flutter get started
アプリ開発の選択肢としてflutterも考慮できるようにしておきたい。いい機会なのでこれからしばらく学んでみようと思います。
今回は[公式ドキュメント](https://docs.flutter.dev/)に従ってflutterのインストールからテストドライブまでをやってみます。


## flutterのインストール
最近はmacOSに慣れてしまったのでこれでインストールします。windows, chromeOS...etcは割愛

### 1. ダウンロード
[ここから](https://docs.flutter.dev/get-started/install/macos)SDKを選んでダウンロード&解凍

```bash
Users/{ユーザ名}/flutter
```
おそらくどこでもいいと思うがユーザ直下に配置しました。

### ２. パスを通す
flutterツールをパスに追加。ダウンロード確認のためバージョンコマンドを叩きます。

```bash
export PATH="$PATH:`pwd`/flutter/bin"
flutter --version
```

![スクリーンショット 2023-07-02 11.07.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254217/2fb80f6e-0d0f-8dc7-64de-7ff243ce780c.png)

いけてそう！

### 3. 依存関係の確認

インストールする必要がある依存関係があるか確認するためにフラッタードクターを実行する。doctorなどコマンドラインツールの詳細は[こちら](https://docs.flutter.dev/reference/flutter-cli)

```bash
flutter doctor　-v
```

![スクリーンショット 2023-07-02 11.11.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254217/026fb1d2-418a-f2cd-0b59-0a7b9517cfde.png)

ios, abdroid開発のためのツールが入ってなさそうなので追加しましょう

## ios環境のインストール
[こちら](https://docs.flutter.dev/get-started/install/macos#ios-setup)の手順通りに実行してみる。

### 1. xcodeをインストール
[MacAppStore](https://apps.apple.com/us/app/xcode/id497799835)よりインストール。その後新しくインストールされたバージョンのXcodeを使用するようにする。

```bash
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
```

### 2. iOSシミュレータをセットアップする

```bash
open -a Simulator
```

![スクリーンショット 2023-07-03 0.09.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254217/27718c26-84ba-3649-2972-aaf19d97d38c.png)

「シミュレータが 64 ビット デバイス (iPhone 5s 以降) を使用していることを確認してください」とのこと。iPhone14ProMaxだった。問題なさそうなのでok

### 3. iOS デバイスに展開する
iosデバイスは持っていないので割愛します...

### 4. cocoapodsのインストール
[公式](https://guides.cocoapods.org/using/getting-started.html)
```bash
sudo gem install cocoapods
```

![スクリーンショット 2023-07-03 0.19.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254217/5fd0ccd6-fe86-5659-3dcc-93ccba558330.png)

エラーになった...アクティブサポートのバージョンをインストールしてからもっかい実効しろとのことなのでやってみる。

```bash
gem install activesupport -v 6.1.7.4
```

![スクリーンショット 2023-07-03 0.22.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254217/6e4ecd74-6d17-32e7-fb28-b74e68589cb0.png)

エラーになった...システムのrubyを利用しているため、権限不足でgemのインストールができないとのこと。[こちら](https://qiita.com/nishina555/items/63ebd4a508a09c481150)を参考に解決しました。

アクティブサポートのバージョンをインストールを再実行。
```bash
gem install activesupport -v 6.1.7.4
```

![スクリーンショット 2023-07-03 0.38.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254217/1b8b2da3-755c-0784-1d54-36a860c77c97.png)

いけた。cocoapodsのインストールを再実行。
```bash
sudo gem install cocoapods
```

いけた。確認。

```bash
flutter doctor -v
```

![スクリーンショット 2023-07-03 0.44.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254217/39e99345-7a0f-882f-cdaf-daa25581f091.png)

Xcode周りは完了！！

## android環境のインストール
[こちら](https://docs.flutter.dev/get-started/install/macos#android-setup)の手順通りに実行してみる。

### 1. Android Studioをインストールする

![スクリーンショット 2023-07-03 0.52.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254217/03b97383-1ca3-00d5-d2fa-d91a8a5af644.png)

Android Studio セットアップ ウィザードに従ってからdoctorコマンドで確認。

![スクリーンショット 2023-07-03 1.31.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254217/5f8483a0-e42a-da9f-696c-399325ce2022.png)

Android toolchainがいくつかつつかれてる...

### 2. cmdline-tools component is missing

[こちら](https://qiita.com/kenbu/items/f27663234717952ca9a4)で解決。Anroid SDK Command-line Toolsを追加する。

![スクリーンショット 2023-07-03 1.35.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254217/00c9bbcb-aef5-21bf-bd84-55e1a36b1eb3.png)

### 3. ライセンスに同意する

コマンドを叩いてyesをしていく
```bash
flutter doctor --android-licenses
flutter doctor -v
```

![スクリーンショット 2023-07-03 1.39.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254217/a5337670-c343-59f8-43b3-d67aae060cc2.png)

Android Studio周りは完了！！

## エディターをセットアップする
[こちら](https://docs.flutter.dev/get-started/editor)の手順通りに実行してみる。

![スクリーンショット 2023-07-03 2.10.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254217/29fd295a-03d8-3bfd-f999-5b182277fe76.png)

flutterライブラリをインストール。確認のためにコマンドパレットから「Flutter: Run Flutter Doctor」を選択すると

>Could not find a Flutter SDK. Please ensure flutter is installed and in your PATH (you may need to restart).

と怒られるので、flutter/binをフォルダを指定すればOK。

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

コマンドパレットから　Flutter: New Project > Applicationを選択。ディレクトリとアプリは以下に作成しました。

```bash
Users/{ユーザ名}/flutter_dev/my_app
```

VSCode右下のデバイスセレクターを選択

![スクリーンショット 2023-07-03 20.34.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254217/3f6609d8-2a81-286b-6160-7eb4b94ab4f0.png)


実行とデバッグからデバック開始を押すと数分ビルドに要したのちデモアプリが立ち上がる。

![スクリーンショット 2023-07-03 20.26.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254217/0f0f23bc-3a15-732c-a19f-83d307a4f16d.png)

ホットリロードを試してみる。

![スクリーンショット 2023-07-03 20.30.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254217/63d964a8-dc3b-d756-b208-a0f63235170f.png)

文字列を変更して保存すると即時で反映されます。今回の目的はこれで達成。お疲れ様でした！！

## NEXT STEP
https://docs.flutter.dev/get-started/codelab
公式だと「初めての Flutter アプリを作成する」に続くようです。どこか時間を見つけてやってみようと思います。

## 最後に運動通信社について
運動通信社は「日本を世界が憧れるスポーツ大国にする」というビジョンを達成するべく、一緒に働く仲間を募集しています！
PMやアプリエンジニア、Webエンジニアなど色んな職種を募集しておりカジュアル面談大歓迎なので是非採用フォームよりご連絡ください！
ぜひ一緒に、自分たちも世の中もワクワクするサービスを作りましょう！

https://sportsbull.jp/about/#recruit

最近Greenも公開されました。

https://www.green-japan.com/company/9598