手把手教你玩轉Flutter之Flutter環境搭建
文章目錄
目錄
前言
一、配置國內鏡像
二、下載Flutter SDK
1.官網下載
2.配置環境變數
3.驗證Flutter是否安裝成功
三、安裝配置Android Studio
1.安裝Android Studio
2.安裝Flutter和Dart插件
3.檢查Flutter環境
四、第一個Flutter應用
1.搭建Flutter應用
2.運行Flutter應用
3.常見問題記錄
參考資料：
前言
Flutter 是 Google 開源的 UI 工具包，幫助開發者通過一套代碼庫高效構建多平臺精美應用，支持移動、Web、桌面和嵌入式平臺，
同時，通過Flutter框架開發的移動端應用，可以在Anroid和IOS中完美使用，不需要再單獨開發Android或IOS版本，目前Flutter已經成為移動端開發熱門的工具，
提示：本文是以Windows為例，記錄了在Windows作業系統中構建Flutter開發環境的步驟，
一、配置國內鏡像
Flutter官方為國內開發者設立了鏡像，在開始配置Flutter環境時，首先要進行配置，需要我們在環境變數中加入如下兩個環境變數：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn在Windows系統中的具體操作為：右鍵此電腦----》屬性----》高級系統設定---》環境變數----》新建環境變數----》添加環境變數如下：
- 變數名：PUB_HOSTED_URL 變數值：https://pub.flutter-io.cn
- 變數名：FLUTTER_STORAGE_BASE_URL 變數值：https://pub.flutter-io.cn
添加完成后，可以在環境變數頁面看到新添加的兩個變數，如下圖，之后重啟電腦，
二、下載Flutter SDK
1.官網下載
下載地址：https://flutter.dev/docs/development/tools/sdk/releases，可以選擇下載穩定版本和測驗版本，
下載完成后會得到一個壓縮包，如我下載的是1.22.5的穩定版：
將壓縮包解壓
2.配置環境變數
將Flutter解壓后的bin檔案夾添加到系統的Path環境變數中，使得可以通過Windows自帶的終端運行Flutter命名，如下圖：
3.驗證Flutter是否安裝成功
打開Windows終端，在終端中輸入Flutter，出現如下內容則說明安裝成功：
三、安裝配置Android Studio
1.安裝Android Studio
安裝Android Studio的教程比較多，在這里就不予贅述了，有問題的同學請自行搜索或者查看本文參考資料中包含的鏈接，
2.安裝Flutter和Dart插件
安裝完成Android Studio后，還需要安裝Flutter和Dart的插件，依次點擊File---》Settings---》Plugins，在Plugins中搜索dart和flutter，并點擊install，安裝完成后重啟IDE即可，如下圖：
3.檢查Flutter環境
在終端中輸入flutter doctor可以檢查目前flutter環境的搭建情況，如：
可以看到，紅色X標識出的為目前沒有配置好的地方，根據錯誤中給出的修改意見，進行相應修改即可，在本例中可以看到，提示Flutter和Dart的插件沒有安裝，但實際情況是已經在上一步中進行了安裝，同時也不影響使用，因此暫時不管它，
四、第一個Flutter應用
1.搭建Flutter應用
在Android Studio中依次點擊File---》new---》new flutter project，選擇第一個Flutter Application，并為應用起名字，之后一路next，直到工程建立成功，如下圖：
2.運行Flutter應用
在運行Flutter應用前，我們需要將手機通過USB連接至電腦，或者建立虛擬機器，建立虛擬機器的方法：Tools>Android>AVD Manager，建立完成后，選擇相應機器，點擊運行按鈕后即可運行flutter程式，如下圖：
默認程式運行后會出現如下界面：
3.常見問題記錄
問題1：運行程式時一直卡在“Running Gradle task 'assembleDebug'”
產生這個問題的原因是由于網路引起的，我們無法訪問到Google，因此需要修改鏡像
首先，修改工程中android/build.gradle檔案，在repositories中注釋google()和jcenter()，新增如下代碼：
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
其次，修改Flutter的組態檔，檔案位置在\packages\flutter_tools\gradle\flutter.gradle，同樣注釋掉 google()和jcenter()，并新增如下代碼：
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
參考資料：
- http://www.zyiz.net/tech/detail-141792.html
- https://www.jianshu.com/p/b9d43dd1e25e
- https://www.jianshu.com/p/b24ae445e167
- https://book.flutterchina.club/chapter1/install_flutter.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/241370.html
標籤：其他