前言
相關文章: Flutter學習目錄
github地址：Flutter學習
文章結構
-
Flutter SDK下載以及安裝
- 網路環境
- SDK下載
- SDK安裝
- 配置環境變數
- 執行flutter doctor
-
安裝編譯器
- Flutter和Dart外掛安裝
- 新建Flutter專案
-
執行第一個程式
-
Android studio在mac上卡頓問題解決
介紹
這裡主要講解Flutter基本環境搭建，目前Flutter已經正式釋出，網上已經有好多關於介紹Flutter的文章。寫作此文章的目的是記錄自己學習過程中的點點滴滴，同時也是為了督促自己，不是為了譁眾取寵。廢話不多說，直奔主題！
一、Flutter SDK下載以及安裝
1.1、網路環境
一般來說，要想安裝或者依賴的某個框架，它自身也可能依賴別的框架或者元件之類的。因此，你就要將所有相關的框架或元件下載下來並進行安裝。然而這些框架或元件，來源可能不是一個網站，特別是你訪問的這些網站都是國外網站，如果你生活在我天朝，就不得不面臨一個問題，就是訪問某些國外網站會受到限制。為了避免不必要的麻煩，有以下兩種方式:
- 翻牆 鄙人採用的這種方式，直接購買VPN
- 使用映象 慶幸，Flutter官方為中國開發者搭建了臨時映象；你只需要將環境變數加入到使用者環境變數中，如下:
$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
備註：
1、這裡說的是臨時映象，是因為後期Flutter官方會推出一個新的穩定版本，到時候你只需要更換對應的地址就可以了，具體詳情檢視Using Flutter in China。
2、這裡新增環境變數新增到使用者環境變數一般採用新增到bash_profile檔案中，全域性生效(下文會詳細介紹)。
1.2、SDK下載
備註: 個人經驗，Flutter官網下載沒有github下載快(你如果已經翻牆就當我沒有說)。
1.3、SDK安裝
解壓安裝包到你指定的目錄 記住，這裡指定好的目錄以後不要輕易移動，否則就要重新配置路徑。 這裡我們在根目錄下新建development資料夾，在development資料夾下面放置剛才的解壓包，如圖：
1.4、配置環境變數
1.4.1、臨時環境變數配置
開啟終端、執行下面程式碼:
$ export PATH=`pwd`/flutter/bin:$PATH
備註:
1、這段程式碼只對當前視窗，換句話說要是新開一個終端視窗，就不生效了。這樣每次開啟一個新的視窗就需要執行上述程式碼，實在是不方便。
2、執行這段程式碼需要在flutter當前目錄執行，換句換說就是先執行
$ cd /Users/yangshichuan/development
然後執行
$ export PATH=`pwd`/flutter/bin:$PATH
1.4.2、設定永久環境變數
為了避免臨時環境變數的弊端，最好設定永久環境變數。方法如下:
- 開啟(或建立).bash_profile
$ touch $HOME/.bash_profile
- 輸入以下程式碼：
$ export PATH=/Users/yangshichuan/development/flutter/bin:$PATH
這裡的路徑/Users/yangshichuan/development/flutter是你電腦放置flutter的絕對路徑，更換為你自己的路徑就好。
- 執行指令
$ source $HOME/.bash_profile
- 驗證路徑是否正確，執行指令:
$ echo $PATH
此時不受終端視窗限制，已經和你的計算機繫結在一起了。 上面提到的配置臨時映象路徑也可以新增到bash_profile檔案中。
1.5、執行flutter doctor
此命令可以幫助你檢視是否需要安裝其它依賴項
$ flutter doctor
效果圖如下:
因為我已經安裝完所有的配置項，即使初次安裝也不用擔心，按照終端給出的提示可以順利安裝成功，如果其中出現安裝失敗，唯一可能的原因是網路不好或者需要翻牆。
總結:
1、總的來說，安裝Flutter主要是：下載Flutter框架➡️指定Flutter解壓路徑➡️配置環境變數➡️執行flutter doctor
2、對於習慣終端操作的同學可以直接執行下面指令：
$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ git clone -b dev github.com/flutter/flu…
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor
如果已經有VPN了，可以不用執行前面兩句，如下：
$ git clone -b dev github.com/flutter/flu…
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor
二、安裝編譯器
對於編譯器，有好幾種選擇如Android Studio、IntelliJ IDEA、VS Code等。這裡主要說的是Android Studio的配置方法，大同小異。
2.1、Flutter和Dart外掛安裝
開啟Android Studio、開啟偏好設定、具體操作如下圖:
點選左側標籤Plugins，在右側搜尋框輸入flutter/dart，搜尋出相應外掛，點選Install，如下圖:
因為我已經安裝，所以上面沒有顯示Install按鈕。 此時，需要重新退出Android Studio，否則不生效。
備註:
這裡對Android Studio是有版本要求的，要高於3.0版本，詳情可以檢視官網Flutter官網。
2.2、新建Flutter專案
經過上面步驟，重新開啟Android Studio，如下圖:
備註:
這裡的Flutter SDK path指的是我們前面解壓包放在的位置<這也就印證了為什麼不要輕易移動SDK的原因>
點選Finish按鈕，至此專案建立完成，如下圖:
三、執行第一個程式
經過以上步驟，我們已經做好所有準備工作，此時已經迫不及待想要執行以下程式，看一下效果。 經過上面建立的工程，裡面會包含一個預設demo，一個簡單的計數器，效果如下:
點選右上角執行按鈕，檢視效果：
如果想修改一下，檢視實時效果，點選右上角熱過載按鈕：
備註:
最好的學習方法是下載官方demo執行，看看效果，然後多思考，多模仿，後續會陸續深入學習並更新文章。
四、Android studio在mac上卡頓問題解決
在初次安裝Android studio軟體時，執行時，發現非常卡頓。雖然我的電腦配置不是太高，但是MacBook Pro那也不是蓋的，足以碾壓絕大數Windows電腦。
經過仔細查詢資料分析，得出以下結論：
初次安裝Android studio，mac會為它分配一定的執行記憶體，但是比較低，這就造成了即使當前mac有多餘記憶體也不會分配給Android studio，執行軟體就會卡頓，解決方案請檢視解決Android Studio在MacbookPro 13下卡頓的問題，這裡就不在囉嗦了。