【自學flutter系列】flutter 開發環境搭建

如下安裝過程僅是winodws7系統下的安裝過程。 windows其它系統的安裝和win7下安裝大體差很少。
若是是其它的如linux, 蘋果的OSX系統。請參考flutter的官方文檔來配置。

1. 安裝Flutter

1.1 下載

下載 flutter_windows_v1.9.1+hotfix.2-stable.zip

解壓到你須要安裝的盤。 若是個人： E:\soft\flutter

1.2 配置環境變量

回到桌面，右鍵計算機 -> 屬性 -> 高級系統設置 -> 環境變量 打開環境變量設置界面

在用戶變量裏找到path, 把 E:\soft\flutter\bin 添加到path.

因爲在國內訪問Flutter有時可能會受到限制，Flutter官方爲中國開發者搭建了臨時鏡像。 再在用戶變量添加下面兩個變量

PUB_HOSTED_URL = https://pub.flutter-io.cn

FLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn

1.3 檢查是否安裝成功

打開cmd, 運行 flutter,

flutter

能看到像下面這樣的內容就說明flutter安裝成功了。

2. jdk安裝

下載jdk安裝，

打開計算機環境變量。 添加 以下變量：

JAVA_HOME=jdk安裝目錄

classpath=.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar;

在path變量中增長 %JAVA_HOME%\bin;

3. 安裝Android studio和android 環境

3.1 下載android studio

打開android官網下載 android studio,

若是打不開也能夠到 http://www.android-studio.org網站下載

點擊運行安裝android studio.

例如個人:

Android studio安裝目錄： E:\Android\Android Studio
 Android SDK目錄: E:\Android\Sdk

3.2 安裝Android sdk

安裝完成第一次運行時， android studio 會提示你要安裝一些sdk, 直接點下一步安裝就好。

注意： 這一步須要花費比較長的時間等待， 完成以後，Android Studio 默認的會爲你安裝好一個android版本的sdk, 並建立好一個相應的的模擬器。

添加環境變量ANDROID_HOME，把你android SDK的路徑填上。

在path中添加 %ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools ;

從新打開cmd。

若是想安裝更多版本的sdk，能夠在菜單欄的tools -> SDK Manage進去管理sdk

至此，咱們的開發環境基本上就安裝好了。下面來運行一下 flutter doctor 檢查下當前的環境是否能夠。

# 運行 flutter doctor 出在以下面的提示，說明咱們的flutter 開發環境已經安裝好了。

λ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.9.1+hotfix.2, on Microsoft Windows [Version 6.1.7601], locale zh-CN)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Android Studio (version 3.5)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

錯誤處理

1. 未在環境變量中配置ANDRIOD_HOME錯誤, 運行 flutter doctor, 出現以下錯誤：

   Doctor summary (to see all details, run flutter doctor -v):
   [√] Flutter (Channel stable, v1.9.1+hotfix.2, on Microsoft Windows [Version 6.1.7601], locale zh-CN)
   [X] Android toolchain - develop for Android devices
       X Unable to locate Android SDK.
         Install Android Studio from: https://developer.android.com/studio/index.html
         On first launch it will assist you in installing the Android SDK components.
         (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
         If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
         You may also want to add it to your PATH environment variable.
   
   [√] Android Studio (version 3.5)
   [!] Connected device
       ! No devices available
   
   ! Doctor found issues in 2 categories.

   解決方法：

   在環境變量中配置變量 ANDRIOD_HOME = 你的android SDK目錄。

1. 提示 flutter doctor --android-licenses

   解決方法：

   輸入 flutter doctor --android-licenses，接下來全部的輸入 y 就能夠了

2. No devices available

   這個錯誤比較好解決， 運行咱們的android模擬器便可。

4. 插件安裝

4.1 Android studio

打開File -> settings -> plugins, 搜索Flutter 安裝

4.2 vscode

打開插件標籤搜索flutter 安裝

5. 建立，並運行一個flutter程序

5.1 android studio

5.2 vscode

5.3 命令行

運行flutter create flutter_demo

flutter create flutter_demo

5.4 運行咱們的第一個flutter程序

我以vscode來說。 先把模擬器運行起來。

點擊右下角的No Device, 選擇須要運行的模擬器點擊運行。 我這裏就只有一個模擬器。以下圖

再運行flutter 程序

cd flutter_demo
flutter run

app 運行起來以下圖

Error runing Gradle 錯誤解決

運行時若是遇到了 Error runing Gradle 錯誤提示，這是由於牆的緣由致使，解決方案是改成阿里的連接。

阿里連接:

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'}

須要修改的文件:

• 在項目目錄下的android目錄下的build.gradle文件。
• 修改Flutter SDK包下的flutter.gradle文件， 具體的文件路徑是：

Flutter SDK目錄\packages\flutter_tools\gradle\flutter.gradle

把文件裏的google() 和 jcenter()這兩行改成阿里的連接.

附錄：

• flutter官網
• flutter中文
• flutter第三方插件庫
• flutter中文網
• 書籍： flutter實戰

以上這些純屬我的學習記錄，本人是一名前端開發，對JS比較熟悉，因此有些地方會套用些JS的語法來作說明

若有錯誤及不妥之處，歡迎評論留言指出。

下一篇: 【自學flutter系列】dart語言學習概覽