Flutter入門教程(二)開發環境搭建

不知名前端李小白發表於2022-03-27

Flutter入門教程(二)開發環境搭建

學習Flutter,首先需要搭建好Flutter的開發環境,下面我將一步步帶領大家搭建開發環境並且成功執行flutter專案。

Flutter環境配置主要有這幾點:

  • 系統配置要求
  • Java環境
  • Flutter SDK
  • Android 開發環境

***以下是基於在Window作業系統上安裝和配置Flutter開發環境***

一、系統配置要求?

  • 作業系統:Windows 7 SP1 或更高的版本(基於 x86-64 的 64 位作業系統)
  • 磁碟空間:除安裝 IDE 和一些工具之外還應有至少 1.64 GB 的空間
  • Git環境:要讓 Flutter在開環境中正常使用,就要有git環境

二、Java 環境配置?

這裡需要安裝 Java 環境,因為Flutter是基於Android的,這裡就不多細說

Java環境下載地址:Java Downloads | Oracle

Flutter入門教程(二)開發環境搭建

這裡直接下載64位安裝包,解壓一直點下一步下一步就搞定了,預設是安裝到C盤,也可以自己選擇喜歡的位置進行安裝。

怎麼檢測java是否安裝成功呢?

1、進入“黑視窗”:快捷鍵: win+R ,輸入cmd,按下回車

2、可以選擇輸入 java  javac  java -version 三個doc命令進行檢查

  • 輸入java+回車,出現如下結果證明安裝成功:

  •  輸入javac,出現如下結果安裝成功:

  •  輸入java -version,檢視Java版本,也可以證明你的java安裝成功

三、Flutter SDK?

 Flutter SDK下載地址:https://flutter.cn/docs/development/tools/sdk/releases

Flutter入門教程(二)開發環境搭建

 選擇最新版本下載即可,下載成功後將壓縮包解壓,解壓存放路徑放在你想放置 Flutter SDK 的路徑中(我的是D:\Android\flutter)

?注意:請勿將 Flutter 安裝在需要高許可權的資料夾內,例如 C:\Program Files\?

我們可以在控制檯輸入 flutter 命令看是否安裝成功,如果輸出如下介面就表示flutter安裝成功啦:

 不要高興的太早,雖然flutter SDK安裝成功了,但是現在控制檯還不可以使用 flutter 命令操作其他業務,需要將 Flutter 的執行檔案路徑加入到 PATH 環境變數:

?右擊【此電腦】選擇【屬性】==>選擇【高階系統設定】==>選擇【環境變數】,在【使用者變數】一欄中,選擇【Path】這個條目

 Flutter入門教程(二)開發環境搭建

 ?雙擊進入Path條目,點選【新建】將你安裝的flutter坐在完整路徑作為新變數的值

Flutter入門教程(二)開發環境搭建

然後一直點選確定就OK啦

 

在將 Path 變數更新後,開啟一個新的控制檯視窗:輸入 flutter doctor 命令,如果它提示有任何的平臺相關依賴,那麼你就需要按照指示完成這些配置。

簡單來看,doctor是醫生的意思,顧名思義就是對flutter環境進行檢查,並將檢測結果以報告形式呈現出來,然後根據檢查報告依次解決現有環境缺陷問題

這裡如果是剛安裝flutter,有些檢查項帶有紅色的[×],我這裡有顯示[√][!]

  • [×]表示還不能正常執行
  • [!]表示還存在一些問題
  • 只有全部為[√],系統環境才是完全安裝好,你的檢查報告才是沒毛病的

有叉的選項可自行復制搜尋,都有解決方案的,這裡就不一一例舉了,結尾會列部分叉踩坑解決方案

現在就來看看上述這個警告,根據它的提示,我們只需要執行: flutter doctor --android-licenses ,執行這條命令後,會有一系列選擇,全部選擇y就好(我也不知道它是個啥,感興趣的小夥伴可以自行研究)

然後我們再來執行: flutter doctor 

 出現這樣全部為√的選項則你的環境就完全安裝好了?

四、設定Android開發環境?

到這裡我們已經正確安裝flutter開發環境,但是還需要配置下Android的開發環境,因為Flutter 依賴 Android Studio 的全量安裝來為其提供 Android 平臺的支援

?安裝 Android Studio

Android Studio下載地址:https://developer.android.google.cn/studio

Flutter入門教程(二)開發環境搭建

?安裝Android SDK

Android SDK下載地址:https://www.androiddevtools.cn

進入官網我們首先找到 SDK Tools 選項:

Flutter入門教程(二)開發環境搭建

點選下載Android SDK壓縮包:

下載成功並解壓安裝到自定義目錄,解壓後檔案目錄如下:

Flutter入門教程(二)開發環境搭建

 

 執行 flutter doctor 確保 Flutter 已經定位到了你的 Android Studio 的安裝位置。如果 Flutter 並未定位到,執行 flutter config --android-studio-dir <directory> 設定你的 Android Studio 的安裝目錄

?建立虛擬機器

首先開啟我們的Android Studio開發工具,第一次安裝開啟介面的左側選擇【Plugin】選項,然後搜尋並安裝【Flutter】外掛,安裝【flutter】外掛的同時一併安裝了【Dart】外掛。

安裝好外掛後,我們建立一個Flutter專案:

 

 這裡需要選擇你的Flutter SDK安裝目錄,點選【Next】,輸入專案名稱:

 

?注意:專案命名規範一般是單詞小寫,多個單詞之間用_連線,如:hello_world?

填寫完畢後點選【Finish】完成,開啟專案進去介面,選擇工具欄的【Tools】,選擇【SDK Manager】

 

正確填寫Android SDK所在目錄:

 安裝所需工具包(這個可以在後期視情況而定選擇下載,這裡只是做一個演示):

然後同樣在Tools選項下選擇【Device Manager】,點選【Create device】按鈕建立虛擬機器:

 這裡自行選擇機型,然後點選【Next】:

選擇一個系統映像並下載(這個過程可能需要幾分鐘):

Flutter入門教程(二)開發環境搭建

下載完成後點選【Next】,繼續點選【Finish】完成,然後點選啟動按鈕,等待虛擬機器開啟即可:

Flutter入門教程(二)開發環境搭建

 ?執行flutter專案

虛擬機器啟動後,我們只需要點選編輯器右上角debug就可執行檢視flutter專案:

這一過程可能需要等待一會兒:

至此,我們的flutter專案就成功執行啦~~?

當然,我們修改main.dart檔案內容時,模擬器也是實時更新的:

 五、總結?

至此,我們從搭建專案環境到執行flutter專案整個流程梳理完成,再進行一次總結:

  • 首先要本身電腦系統配置達到指定要求
  • Java 環境搭建
  • 獲取Flutter SDK
  • 設定Android Studio開發環境
  • 建立虛擬機器

 

*****注意?:本系列均參照Flutter官網進行整理*****

相關文章