痒い所に手が届くFlutterの環境構築・導入設定(Mac)

# FlutterをPCにインストール
まず以下のリンクからインストールします(`hogehoge.zip`って書いてあるボタン押す)
**Mac**: https://flutter.dev/docs/get-started/install/macos
**Windows**: https://flutter.dev/docs/get-started/install/windows (一応)

#### PATHを通す
`vim`使うんですがWebさっぱりわかんなかったのでここで詰まりました

ググってみると

```
$ vim .bash_profile
```
の後に`export PATH="$PATH:/Users/hogeUser/Developper/flutter/bin"`
(:以降はflutterフォルダの場所に`/bin`をつける)を
追加したらいけるよー と出るのですが

実際やってみるとすでに`vim`経由でインストールした`homebrew`のやつがごにょごにょ書いてある。。。
**そもそも`vim`で`bash`の編集ってどうやるの？？？**

```
hogeUsernoMacBook-Air:~ hogeUser$ vim .bash_profile

....

#rbenv
export PATH=~/.rbenv/bin:$PATH eval export PATH="/Users/hogeUser/.rbenv/shims:${PATH}"
export RBENV_SHELL=bash
source '/usr/local/Cellar/rbenv/1.1.2/libexec/../completions/rbenv.bash'
command rbenv rehash 2>/dev/null
rbenv() {
  # 省略
  esac 
} 
~                                                                               
~                                                                               
-- INSERT --
```

#### `vim`操作の超最低限の基本
`vim`はモードを変更しながらコマンドを使って操作します(テキストエディタみたいにはいかない部分もあります)
**モード変更**

|       **コマンド** |    **操作**   |
|:-----------------:|:------------------:|
|              Esc |        **コマンドモード**(コマンド使うときは一旦これに戻す)        |
|            i |       **挿入モード**(追加したい位置にカーソルを持ってこれたらこのモードに)       |
|              o |        後ろに改行してから**挿入モード**        |

**コマンドモード**

|       **コマンド**  |    **操作**      |
|:----------------:|:-----------------:|
|              :wq |        **変更を保存して終了**       |
|         k        |        上移動                    |
|         l        |        右移動                    |
|         h        |        左移動                    |
|         j        |        下移動                    |
※**挿入モード**にしないと`bash`の編集はできません
詳細はこちらから→**[【備忘録】Vimの操作 - Qiita](https://qiita.com/one-a/items/a4e1d5a736d8408fd089)**

以上を駆使して`export PATH="$PATH:/Users/hogeUser/Developper/flutter/bin"`を追加し成功しました

```
hogeUsernoMacBook-Air:~ hogeUser$ vim .bash_profile

....

export PATH="$PATH:/Users/hogeUser/Developper/flutter/bin"
#rbenv
export PATH=~/.rbenv/bin:$PATH eval export PATH="/Users/hogeUser/.rbenv/shims:${PATH}"
export RBENV_SHELL=bash
source '/usr/local/Cellar/rbenv/1.1.2/libexec/../completions/rbenv.bash'
command rbenv rehash 2>/dev/null
rbenv() {
  # 省略
  esac 
}   
~                                                                               
~                                                                               
wq!
```

パスを通したら
`Esc`(INSERT(入力モードからノーマルモードへ))→`:wq!`と入力(一番下に出る)→`Enter`

#### 追記[2020/1/13]
状況によっては`source`コマンドで変更の反映が必要なようです
(PC買い替えたせいでもれなくつまづきました。。。。)

```
source ~/.bash_profile
```

こんなのも出ますが`OK`を押します
![スクリーンショット 2019-08-17 0.51.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427937/a8c4b2c1-ac8f-60fd-257c-39d2b3bd0d82.png)

1分ほど要しますがこれが出たら成功です

```
hogeUsernoMacBook-Air:~ hogeUser$ flutter --version
Flutter 1.7.8+hotfix.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 20e59316b8 (4 weeks ago) • 2019-07-18 20:04:33 -0700
Engine • revision fee001c93f
Tools • Dart 2.4.0

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool anonymously reports feature usage statistics and crash    ║
  ║ reports to Google in order to help Google contribute improvements to       ║
  ║ Flutter over time.                                                         ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://www.google.com/intl/en/policies/privacy/                           ║
  ║                                                                            ║
  ║ Use "flutter config --no-analytics" to disable analytics and crash         ║
  ║ reporting.                                                                 ║
  ╚════════════════════════════════════════════════════════════════════════════╝
```

# Android Studioを入れる
#### ダウンロード
https://developer.android.com/studio からダウンロードします
#### インストール
`LaunchPad`などから`Android Studio`を開きます
こんなの出ますが`Android Studio`を初めて入れる方は**`Do not import settings`のまま`OK`で大丈夫です**
(`Android studio`には**設定をエクスポートして設定記録用ファイルとして保存する機能**があるようで、
`Config or installation folder`で記録用ファイルの場所を選択すると**以前の設定をインポートできるようです**)
![スクリーンショット 2019-08-17 2.36.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427937/42481903-0574-a02d-c6cb-6f46d27b0cf1.png)

インストールが完了です
![スクリーンショット 2019-08-17 2.49.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427937/2ef475b2-1da5-1b91-91ac-f5c6cd9ad577.png)

#### Flutterを導入
右下の`Configure`→`Plugins`で検索画面が出るので
`Flutter`と入れてFlutterのプラグインをインストールします
`Restart IDE`→`Restart`とやるか
出なければインストールし終わったあと**再起動します**
![スクリーンショット 2019-08-17 2.57.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427937/3775fb5b-f9ed-1769-d73d-49adeaddce71.png)
再起動が終わると`Start a new Flutter project`と出ており
開発の準備ができました、お疲れでした。。。。

# 参考
#### vimまわりとか
**・[【備忘録】Vimの操作 - Qiita](https://qiita.com/one-a/items/a4e1d5a736d8408fd089)**
**・[MacでPATHを通す - Qiita](https://qiita.com/nbkn/items/01a11392921119fa0153)**
**・[PATHを通すために環境変数の設定を理解する (Mac OS X) - Qiita](https://qiita.com/soarflat/items/d5015bec37f8a8254380)**

#### other
**・[Flutter開発環境構築(Mac編) - Qiita](https://qiita.com/akatsukaha/items/3b8a5a6d94a3cdb1e047#41-android-studio%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)**
**・[Android Studio の設定を共有する方法 ｜ DevelopersIO](https://dev.classmethod.jp/smartphone/android-studio-share-settings/)**