Flutter環境構築 - 1（Flutter SDKインストール編）

#はじめに
Flutterの開発環境構築の手順について解説していきます。
今回は「**Flutter SDKインストール編**」です！
また今回の解説では、私自身がmacOSを使用しているということもあり、**macOS**での手順解説となります。
Windows・Linuxを使用されている方は別途、Flutter公式サイトの[Windows版](https://flutter.dev/docs/get-started/install/windows)・[Linux版](https://flutter.dev/docs/get-started/install/linux) などをご参照下さい。

**Flutter環境構築シリーズ**
・[Flutter環境構築 - 2（Xcode・iOSシミュレーターセットアップ編）](https://qiita.com/naru_chan__/items/d64455cb7d0e7dd223a5)
・[Flutter環境構築 - 3（Android Studio・Androidエミュレータセットアップ編）](https://qiita.com/naru_chan__/items/94e8e2f85bd1803feddd)
・[Flutter環境構築 - 4（VSCodeセットアップ編）](https://qiita.com/naru_chan__/items/1cf6f3d43beb97698592)


#「Flutter SDKインストール編」でやること
本記事では、以下の項目を行います。

- Flutter SDKのインストール
- Flutterコマンドのセットアップ

#システム要件
まずFlutterをインストールして実行するには、以下の要件を満たしている必要があります。

- **オペレーティングシステム(OS)**: macOS(64-bit)
- **ディスク容量**: 2.8 GB (IDE /ツールのディスク容量は含まれません)
- **ツール**: 以下のコマンドラインツールが使用できること。
    - bash
    - curl
    - git 2.x
    - mkdir
    - rm
    - unzip
    - which
    - zip

この条件が揃っていましたら、早速環境構築していきましょう！

# Flutter SDKのインストール

#### 1.Flutter SDKをインストールする
[Flutter公式サイト](https://flutter.dev/)右上の「Get started」をクリック
![スクリーンショット 2020-04-01 15.18.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/bb58b0f9-95d3-bb03-bf44-2c5e8fb06e73.png)

installページにきたら**macOS**を選択
![スクリーンショット 2020-03-29 23.41.45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/7ea98850-635c-b676-6af1-f43e8f2c9641.jpeg)

Get the Flutter SDK 欄のダウンロードボタンをクリックし、Flutter SDKをダウンロード
![スクリーンショット 2020-03-29 23.41.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/5d9fafff-bfcf-52ef-6306-d1d7170a85e5.png)

完了したら、ダウンロードしたzipファイルをクリックして解凍
Macでは基本「Downloads」の中にダウンロードされていると思います。
解凍できたら、次項目からターミナルにてコマンドを実行していきます。

# Flutterコマンドのセットアップ
ターミナルにて以下を実行していきます。

#### 1.Flutterをパスに常に追加する

ホームディレクトリに移動

```
cd
```

「development」ディレクトリを作成

```
mkdir development
```

作成した「development」ディレクトリに移動

```
cd development
```

「flutter」ファイルを「development」ディレクトリの中に移動
ユーザー名のところは**各自のユーザー名を入力**して下さい。
また、インストールされたflutterファイルの場所によってこちらは書き換えて下さい。

```
mv /Users/ユーザー名/Downloads/flutter ./
```

「flutter」ファイルに移動

```
cd flutter
```

Flutterをパスに常に追加する

```
vi ~/.bash_profile
```

**「i」**をタイプして挿入モードにし、**export PATHの先頭に以下コードを記入**します。
ユーザー名は各自ユーザー名を記述して下さい。
**パスの区切りの「:」を忘れないようにして下さい。**

```
/Users/ユーザー名/development/flutter/bin:
```

コードの全体（例）

`export PATH="/Users/ユーザー名/development/flutter/bin:~/.rbenv/shims:/usr/local/bin:$PATH"`

**escキー**で挿入モードを終了します。

編集が完了したら、**「:wq」を入力しEnter**で編集を終了させます。

```
:wq
```

#### 2.Flutterコマンドが実行できるようにする

```
source ~/.bash_profile
```

#### 3.Flutterコマンドを実行

```
flutter
```

するとコマンドが実行され、「Welcome to Flutter！」と表示されます。
<img width="604" alt="スクリーンショット 2020-03-30 0.07.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578233/74e96b77-e59b-3a5d-7fee-5d752ed782d0.png">

これでFlutterコマンドが実行できるようになりました！

#最後に
以上で「Flutter SDKインストール編」は終了となります。お疲れ様でした。

最後までご覧下さりありがとうございました。

**Flutter環境構築シリーズ**
・[Flutter環境構築 - 2（Xcode・iOSシミュレーターセットアップ編）](https://qiita.com/naru_chan__/items/d64455cb7d0e7dd223a5)
・[Flutter環境構築 - 3（Android Studio・Androidエミュレータセットアップ編）](https://qiita.com/naru_chan__/items/94e8e2f85bd1803feddd)
・[Flutter環境構築 - 4（VSCodeセットアップ編）](https://qiita.com/naru_chan__/items/1cf6f3d43beb97698592)


参考サイト[[Flutter公式サイト](https://flutter.dev/)]