# Flutter - 安裝(Window + Mac)

flutter UI 原生較多，且暫時想脫離JS的懷抱外加想嘗試沒有使用過的東西，所以使用它當作這次開發APP的基底~

## Windows
### 前置作業
* 安裝 Git
* 安裝 Android Studio

### Flutter安裝
1. 下載SDK

    git clone https://github.com/flutter/flutter.git -b stable

2. 安裝(有軟體需安裝就按照指示安裝)

    #進入flutter_console
    flutter_console.bat
    
    #安裝dart
    flutter doctor


有打X的地方德依照指示裝一裝

3. (選)添加環境變數，方便後續指令輸入

    export PATH=`你剛剛下載的位置`/flutter/bin:$PATH

### 使用VSCode撰寫
1. 安裝延伸模組(紅框處)，安裝完延伸套件後從新開啟VSCode

### 開始第一個Flutter
1. cmd 輸入

    flutter create hello_world

命名規範為底線式，[官網說明](https://dart.dev/tools/pub/pubspec#name)。

### 安裝模擬器
1. 開啟Android Studio 在主選單列中依序選取「View」(檢視) >「Tool Windows」(工具視窗) >「Device Manager」(裝置管理工具)。
2. 點擊Create Device，接著就可以選手機、選想要的系統，**API 等級**記得要好好注意，因為你的APP無法在 API 等級低於應用程式所需的系統映像檔上執行 `minSdkVersion`。
3. 接著開啟VSCode，如圖操作就可以在模擬器選單中看到剛剛安裝的模擬器了
4. 上述步驟都操作完成後開啟Android Studio就可以使用剛剛安裝的模擬器進行偵錯
5. 若覺得每次開模擬器都要開Android Studio 很麻煩，可以在VSCode上裝`Android iOS Emulator`這一個套件
然後依照官方說明文件從新設定設定檔(如下圖所示，不知道Android Studio 的 emulator安裝位置可以像下圖黃框操作找到儲存路徑)
6. 在按照官方說明進行操作就可以開啟模擬器了(如圖，檢視 > 開啟命令選擇區)
7. 接著按正常Debug流程就可以用模擬器進行除錯

## Mac
### XCode 安裝
1. 從 APP Store 搜尋 XCode 並進行下載
### VSCode 安裝
1. 從[官網](https://code.visualstudio.com/)進行下載

### Flutter SDK 安裝
1. 從[官網](https://docs.flutter.dev/release/archive?tab=macos)下載SDK

     git clone -b master https://github.com/flutter/flutter.git
     ./flutter/bin/flutter --version

3. 依據 `flutter doctor` 指令輸出結果下載所需檔案

    cmdline-tools component is missing
    Run `path/to/sdkmanager --install "cmdline-tools;latest"`
    See https://developer.android.com/studio/command-line for more details.

進入 Android Studio 安裝
3. (選)添加環境變數，方便後續指令輸入

    export PATH=`你剛剛下載的位置`/flutter/bin:$PATH

### 使用實體機
1. 開啟 XCode，設定個人 Apple ID
2. 開啟 Terminal 執行以下指令(若有更新套件也是相同指令)

flutter clean
flutter pub get
cd ios
arch -x86_64 pod update
arch -x86_64 pod install

3. 填入相關資料

### 使用內建模擬器

open -a Simulator

## 參考資料
1. [官網](https://docs.flutter.dev/get-started/install/windows)

## 相關問題解決
### Unable to find bundled Java version.
MacOS

cd /Applications/Android\ Studio.app/Contents
ln -s jbr jre

若在輸入指令時遇到

Operation not permitted

可以去把該[權限打開](https://osxdaily.com/2018/10/09/fix-operation-not-permitted-terminal-error-macos/)即可

###### tags: `flutter` `quickstart`