Flutterをはじめる[環境設定〜立ち上げ]

# 概要
現在エンジニアの需要が高まりと同時にエンジニア転職のために某スクールに通って勉強をする人等が増えている。
そのような人が勉強する内容はwordpress等のweb制作であることが多い。このような技術は差別化を測るのが難しいのでモバイルアプリの開発をしようと考えた。
swiftやkotlinではなくFlutterを選択した理由は主に以下の3つである。

・iosとandroidの両方の開発ができる
・Google様がバックに居るためメンテナンスが定期的に行われる
・新しい技術なので参入できる可能性が高い

# 実行環境
・mac Catalina 

# インデックス
[1.環境構築](#1-環境構築)
[2.flutter doctorのエラー対処](#2-flutterのエラー対処)
[3.アプリの立ち上げ](#3-アプリの立ち上げ)

#1. 環境構築
環境構築は非常に簡単で以下のステップを踏むと完了する。

1.Flutter SDKのdownload
2.環境変数の設定
3.Android studioのdownload

以下で簡潔にそれぞれのステップについて解説する。

## 1.Flutter　SDKのdownload
以下の公式HPよりFlutter SDKをdownloadする。

[Flutter公式](https://flutter.dev/docs/get-started/install)

![flutrter.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/964ab72b-f2c5-3d1b-e086-320eb511e13a.jpeg)
自分のosにあったものを選択する。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/5429a733-3c8f-5d4e-640c-0b122b2b1678.png)
downloadしたファイルを解凍し開発用のFolderに格納しておく。

## 2.環境変数の設定
以下のように環境変数を設定する。
pwdにはステップ1でflutterを格納したFolderまでのpathを記述する。
bash_profileへは
`vim ~/.bash_profile`
で移動可能。

```:bash_profile
export PATH="$PATH:`pwd`/flutter/bin"
```

変数の設定が完了したら以下のコマンドを通るか確認する。

```
$ flutter doctor
```

このような出力になったら成功。

```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on Mac OS X 10.15.7 19H2 darwin-x64, locale
    ja-JP)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
```

仮にこのコマンドが通らない場合はpathが間違っているので再度Folderのpathを確認する。

3.Android studioのdownload
flutterの公式ドキュメントからandroid studioに飛べるのでそこからandroid studioをdownloadする。
以下のように解答できたらApplication folderに移動させる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/c747db8b-748f-5479-9d56-34e8f9b3b80c.png)

諸々聞かれるのでデフォルトの解凍をしていく。

最終的にdownloadが完了すると以下のような画面になるのでConfigureのPreferenceからPluginsを選択し、その中のFlutterをdownloadする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/d055dacf-3df9-e3d7-18ca-3df0500aeeda.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/cc5a1313-6e33-0190-a4ee-324c8605be93.png)

追加後、android studioをrestartさせると以下のようにCreate New Flutter Projectの項目が追加されているのでここを押せば新しいFlutterのアプリケーションが作成できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/c055e03c-fb6f-e716-b0a3-a47532864a01.png)

この後、諸々application nameやら聞かれるが適当でok。
最終的に以下のような画面になれば開発ができるようになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/1c4172db-2aee-c999-8a42-1057fbc35a30.png)


#2. flutterのエラー対処
Terminalで`flutter doctor`とコマンドを叩くと以下のようなエラーを吐かれた。
この状態だと開発がスタートさせられないためそれぞれの解決策を記述する。

```
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        sudo gem install cocoapods
[!] Android Studio (version 4.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.46.1)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available
```

## ✗ Android licenses not accepted.  To resolve this, run: flutter doctor

flutter doctor --android-licensesを打てば解決すると書いてあるので以下のコマンドを叩く。

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

諸々聞かれるので全てyで通す。

## ✗ CocoaPods not installed.
`To install:
        sudo gem install cocoapods`

とのことなので言われたとおりに以下のコマンドを叩く。

```
$ sudo gem install cocoapods
```

認証のためにpasswordを聞かれるのでmacのpasswordを入力して必要なgemをインストールする。

## ✗ Flutter plugin not installed; this adds Flutter specific functionality.

FlutterのPluginは入れているはずなのにinstallされていないことになっているらしい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/684fb269-ae9b-266b-7cc4-f3d062868a53.png)


以下のgithubより解決策がわかった。
どうやら以下のコマンドを叩くと解決するらしい。(なんでかは不明だが・・・)

```
$ ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1
```

これにより同時にDartのエラーについても解消される。

対象のgithub
↓↓↓↓↓↓
https://github.com/flutter/flutter/issues/68429

##  ✗ Flutter extension not installed; install from

これについては以下のurlからFlutterのプラグインを入れることで解決。

https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter


以上で全てのエラーが解決！！

```
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 1.22.5, on Mac OS X 10.15.7 19H2 darwin-x64, locale
    ja-JP)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.46.1)
[✓] Connected device (1 available)

• No issues found!
```

#3. アプリの立ち上げ

androidとiosの両方で初期アプリの立ち上げを行う。

## Androidアプリの立ち上げ

以下の画像の赤で囲んだ部分より携帯画面を設定できる。

![画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/cabf3f80-9c06-2a6c-fdd0-a66c4bce1bc0.jpeg)

以下の画像に行ったらCreate Virtual Deviceを選択する。

![d167aaac7ed8ecd1c8a4986ae43c0784.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/20b5ca35-c436-0b21-a76d-7782c9d45e0a.png)

次にPhoneを選択し、好みで使用したいphoneを設定する。(今回はPixel2を用いている)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/66d8327f-6477-585e-c54f-195da76f4f81.png)

Androidのバージョンを聞かれるのでお好みで選択。(あまりに新しすぎるバージョンだと思いもよらぬ不具合がある可能性があるため9.0verを選択している)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/3abcf8b1-d815-b065-0416-29083adf88eb.png)

最後はお好みでAVD nameを付けてFinish を押す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/7e4050ea-5991-ad93-2713-c9b6cb51347d.png)

ここまで行ったら最初の画面に戻ってActionsより緑色の三角を押してvirtual deviceをスタートさせる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/eba797c2-5f0e-c4b7-559b-24c501765071.png)

赤丸で囲んだスタートボタンを押すと初期アプリを開始できる。
プラスボタンを押すとカウントが増えていくのが確認できる。

![start.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/4b005b01-78c6-3842-146f-2519940f84f0.jpeg)

## IOSアプリの立ち上げ
IOSアプリの起動にはxcodeが必要になる。
まだの人は以下の記事を参考にしてxcodeのインストールを行う。

[今さら聞けない！Xcodeをインストールする方法【iOSアプリの統合開発環境】](https://techacademy.jp/magazine/1409)

xcodeのインストールが完了したら再びandroid studioに戻って以下の画面のように`Open IOS Simulator`を選択する。

すると、以下のようにiphoneが立ち上がるのであとはAndroidと同様の手順で緑のスタートを押しアプリを起動させる。

Iphoneの立ち上げ
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/c50cc52b-7c10-b565-171b-50809cd4e2c0.png)

アプリの立ち上げ
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/5b91eeb6-69c6-51de-b5d9-6cb0d67db927.png)

今回はここまでにして次回以降に実際にアプリを作成していきたいと思う。