FlutterでiOS, Androidアプリ開発入門【第一部 環境構築編】

# FlutterでiOS, Androidアプリ開発入門
本記事はmacOSユーザーを想定しています。

![JOJO](https://i.pinimg.com/originals/28/b8/89/28b889035db61720ad25caa2ec6536d7.gif)

## なぜFlutterなのか
1. 技術的資産性が高い
2. メンテナンスされている
3. 学習コストが低い

Googleによるメンテナンス、発展の余地、クロスプラットフォーム、ホットリロードなど様々な要素から技術的な資産性が高いな〜と感じています
またβ版のFlutter for Webも気になります…！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209400/a0b8482c-8413-ae45-d5ec-7e4b1c5d24ce.png)

# 【第一部】　環境構築編
## 環境
```
macOS   10.15 Catalina <- Xcode11をインストールするためにCatalina以上必須🔥
Xcode   11.4           <- Flutterで開発するためにXcode11以上必須🔥
Android Studio 4.0.1![スクリーンショット 2020-08-17 21.55.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209400/8720ad30-67b4-b5ee-d346-92e31383a991.png)

iOS     13.3
Flutter 1.18
```

こちらのドキュメントに従ってインストールしていきます
https://flutter.dev/docs/get-started/install/macos

## Flutterをインストール
ターミナルを開いてホームディレクトリに移動

```bash
$ cd ~
```

次のステップ 1. と 2. はgitからcloneすることで省略可能です。

```bash
$ git clone https://github.com/flutter/flutter.git
```

### 1. Download the Flutter SDK
Get the Flutter SDKからSDKをダウンロードします
https://flutter.dev/docs/get-started/install/macos

### 2. Locate the file
解凍したファイルを任意のディレクトリに置きます(とりあえずホームディレクトリにポンと置いておきます。)

```bash
$ unzip ~/Downloads/[flutter_macos_hoge.zip]
```

### 3. Add the flutter tool to your path
.zshrcに以下を記載

```
export PATH=＄HOME/flutter/bin:$PATH
```

sourceで反映

```
source .zshrc
```

[macでPATHを通す方法](https://qiita.com/k3ntar0/items/eb8cdbd8eba9da388def)

### 4. (Optional) Pre-download development binaries

一応ダウンロードしておきます。

```
$ flutter precache
```

### 5. Run flutter doctor
Flutterがインストールされていることを確認します。

```
$ flutter doctor
```

Flutterのインストールが確認できました。

`💡Tips ルートディレクトリ以外でflutterコマンドが認識されなかったりする場合はターミナルを再起動してみよう`


## iOS setup
### 1. Install Xcode
まだXcodeがインストールされていない場合は、[Mac App Store](https://itunes.apple.com/us/app/xcode/id497799835)から事前にインストールしてください。

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

### 2. Set up the simulator
iOSデバイスのシュミレーターを立ち上げます

```
$ open -a Simulator
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209400/3d23712d-cf7d-96ad-e58e-a98acafe91a8.png" width=50%>

### 3. Create a simple Flutter app
いよいよアプリを作成！
作業用ディレクトリに移動

```
$ flutter create sample_app
```

```
$ cd sample_app
```

```
$ flutter run
```

`💣 Error シミュレーターを起動していなかった場合`

```
$ flutter run
No supported devices connected.
```

事前に立ち上げておく

```
$ open -a Simulator
```

`💣 Error iPhoneを接続していた場合`
実機で動かすにはセットアップが必要なので一旦はシミュレーターに頼ります

```
$ flutter run
More than one device connected; please specify a device with the '-d <deviceId>' flag, or use '-d all' to act on all devices.

k3ntar0-iPhoneXs  • 00008020-001E1DAA26------            • ios • iOS 13.3
iPhone 11 Pro Max • 3B03E8AB-04A8-4CED-A35F-523900------ • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-3 (simulator)
```

```
$ flutter run -d <deviceId>
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209400/362e75d5-9e6a-7eae-f6dd-088e8f24361f.png" width=50%>

無事立ち上がりました！


### 4. Android Studioでビルド
先ほどはシミュレーターで動かしましたが、次は実機で動かせるようにします

iOSアプリをビルドするためにcocoapodsをインストールします

```
$ sudo gem install cocoapods
$ pod setup
```

基本的にIDEはAndroid Studioを選んでおけば間違い無いです

```zsh
$ open . -a Android\ Studio
```

![スクリーンショット 2020-08-17 21.56.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209400/6224081e-bb52-8207-bede-ef9d277803b1.png)


### 5. Xcodeでビルドする場合
（Android Studioの場合は不要）

#### a. pod setup
```
$ sudo gem install cocoapods
$ pod setup
```

#### b. Open Runner
RunnerのプロジェクトがXcodeで開きます

```
open ios/Runner.xcworkspace
```

#### c. Setup Xcode
XcodeはUIがめちゃくちゃわかりにくいので気を強く持ってください

1. Runnerを選択
2. Signing & Capabilitiesを選択
3. Teamを設定
4. Bundle Identifierを設定

このあたりは[他の記事](https://www.google.com/search?rlz=1C5CHFA_enJP870JP871&ei=BgH_XdCNLKWYr7wPhYCKgAY&q=xcode+%E5%AE%9F%E6%A9%9F+%E3%83%93%E3%83%AB%E3%83%89&oq=xcode+%E5%AE%9F%E6%A9%9F%E3%80%80&gs_l=psy-ab.1.1.0l8.89234.89809..91444...0.2..0.115.420.0j4......0....1..gws-wiz.......0i71j0i67j0i4i37i32.NQzB3m7O96I)に説明を譲ります

### d. Launch app in real iPhone
sample_app が追加されています！

<img width="375" alt="IMG_4176B29C3C6A-1.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209400/44511338-21cd-ee21-cbc8-1d746a6e9ee1.jpeg">


### 第二部に続く👉
(coming soon)