企業建站知識推廣知識小程序微信營銷 APP開發前端設計 MindManager 開發語言自媒體

Flutter環境搭建以及開發軟件安裝

發表日期：2018-12 文章編輯：小燈瀏覽次數：6607

這里主要講解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上下載
備注:
個人經驗，Flutter官網下載沒有github下載快(你如果已經翻墻就當我沒有說)。

1.3、SDK安裝
解壓安裝包到你指定的目錄
記住，這里指定好的目錄以后不要輕易移動，否則就要重新配置路徑。
這里我們在根目錄下新建development文件夾，在development文件夾下面放置剛才的解壓包，如圖：

圖1 SDK路徑

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

效果圖如下:

圖2

因為我已經安裝完所有的配置項，即使初次安裝也不用擔心，按照終端給出的提示可以順利安裝成功，如果其中出現安裝失敗，唯一可能的原因是網絡不好或者需要翻墻。

總結:

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 https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor

如果已經有VPN了，可以不用執行前面兩句，如下：

$ git clone -b dev https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor

二、安裝編譯器

對于編譯器，有好幾種選擇如Android Studio、IntelliJ IDEA、VS Code等。這里主要說的是Android Studio的配置方法，大同小異。

2.1、Flutter和Dart插件安裝
打開Android Studio、打開偏好設置、具體操作如下圖:

圖3

點擊左側標簽Plugins，在右側搜索框輸入flutter/dart，搜索出相應插件，點擊Install，如下圖:

圖4

圖5

因為我已經安裝，所以上面沒有顯示Install按鈕。
此時，需要重新退出Android Studio，否則不生效。
備注:
這里對Android Studio是有版本要求的，要高于3.0版本，詳情可以查看官網Flutter官網。

2.2、新建Flutter項目
經過上面步驟，重新打開Android Studio，如下圖:

圖6

圖7

圖8
備注:
這里的Flutter SDK path指的是我們前面解壓包放在的位置<這也就印證了為什么不要輕易移動SDK的原因>

圖9

點擊Finish按鈕，至此項目建立完成，如下圖:

圖10

三、運行第一個程序

經過以上步驟，我們已經做好所有準備工作，此時已經迫不及待想要運行以下程序，看一下效果。
經過上面創建的工程，里面會包含一個默認demo，一個簡單的計數器，效果如下:

圖11

點擊右上角運行按鈕，查看效果：

圖12

如果想修改一下，查看實時效果，點擊右上角熱重載按鈕：

圖13

備注:
最好的學習方法是下載官方demo運行，看看效果，然后多思考，多模仿，后續會陸續深入學習并更新文章。

四、Android studio在mac上卡頓問題解決

在初次安裝Android studio軟件時，運行時，發現非常卡頓。雖然我的電腦配置不是太高，但是MacBook Pro那也不是蓋的，足以碾壓絕大數Windows電腦。
經過仔細查找資料分析，得出以下結論：
初次安裝Android studio，mac會為它分配一定的運行內存，但是比較低，這就造成了即使當前mac有多余內存也不會分配給Android studio，運行軟件就會卡頓，解決方案請查看解決Android Studio在MacbookPro 13下卡頓的問題，這里就不在啰嗦了。

關聯文章:
Flutter學習之Dart語法