標籤：

Flutter 環境搭建和第一個Flutter應用

11-25

本文基於mac系統

首先給出flutter中文官網地址 flutterchina.club/get-s

根據官網流程，當然可以一擼到底，正常情況下，都是正常的。可是，根據個人經驗，踩坑是必然的。

主要分為3個步驟：

1 Flutter SDK下載

2 Flutter 環境變數配置

3 第一個Flutter應用

Flutter SDK下載

打開終端執行命令 git clone -b beta github.com/flutter/flut 下載flutter SDK

mac系統，Futter SDK下載完成後默認路徑是：Users/xxxxx/flutter，比如我的是 Users/wujian/flutter，這個也是flutter SDK的安裝目錄。

在Mac上顯示的就是Macintosh HD ->Users -> wujian -> flutter

Flutter 環境變數配置

使用鏡像：

由於在國內訪問Flutter有時可能會受到限制，Flutter官方為中國開發者搭建了臨時鏡像，大家可以將如下環境變數加入到用戶環境變數中。

在命令行下，進入用戶目錄：執行命令 cd $HOME

打開.bash_profile文件：執行命令 open -e .bash_profile

文件打開後，開始編輯bash文件，在其中添加以下內容：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

同時添加flutter相關工具到path中，也就是添加 Flutter SDK 安裝的路徑

export PATH=${PATH}:/Users/wujian/Flutter/flutter/bin:$PATH

關閉bash文件，配置完成後，更新配置的環境變數，執行命令： source .bash_profile

flutter驗證：

終端直接輸入 flutter，沒有提示該命令找不到，則配置成功。如下：

運行 flutter doctor，安裝相關依賴，可重複執行 ，終端執行命令：flutter doctor

注意，個人經驗，可能會卡在「Building flutter tool...」提示語句，請耐心等待。請一定要配置臨時鏡像，否則會下不下來，經常出現下載失敗的情況，請掛VPN嘗試，如果未購買vpn，可以使用藍燈 Lantern免費版使用。

執行結束後，成功後是這樣的

第一個Flutter應用

啟動Android Studio，安裝AndroidStudio的Flutter插件，安裝成功後，重啟Studio

使用AndroidStudio建立Flutter項目

注意：新建工程，工程名不能含大寫字母，這與Android Stuidio不同。New Flutter Project這個過程可能會卡一會，New Flutter Project成功後頁面如下：

在Flutter SDK path中選擇你的SDK安裝路徑（指向到頂層flutter目錄即可，也就是上面說的 flutter安裝目錄），不要點擊那個install SDK按鈕。

Creating Flutter Project的過程十分的漫長，請耐心等待。如果超過5分鐘，根據個人經驗，可能頁面卡死，其實flutter項目已經創建好了，可以到項目路徑下查看。

所以，我們直接強殺AS，然後重新打開，open項目

項目打開後，直接運行項目，可能會遇到如下錯誤

問題描述：由於國內鏡像原因，很多jcenter google庫無法訪問導致，即使vpn開了也一樣。

解決方法：修改build.gradle,注釋掉jcenter()，google()。使用阿里的鏡像。

第一步：

buildscript {
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 }
}
?
dependencies {
classpath com.android.tools.build:gradle:3.1.2
}
}
allprojects {
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安裝目錄，比如：

Macintosh HD? ? ?Users ? ?wujian.? ? ?flutter? ? ?packages? ? ?flutter_tools? ? ?gradle?

找到下 flutter.gradle文件 找如如下內容替換成和我一樣的 把jcenter注釋掉。

buildscript {
repositories {
//jcenter()
//maven {
// url https://dl.google.com/dl/android/maven2
//}
maven{
url https://maven.aliyun.com/repository/jcenter
}
maven{
url http://maven.aliyun.com/nexus/content/groups/public
}
}
dependencies {
classpath com.android.tools.build:gradle:3.1.2
}
}

再重新運行，問題解決。


推薦閱讀：

TAG:Flutter | Android | Java |