1. 程式人生 > 程式設計 >Windows實現Flutter環境搭建及配置這一篇就夠了

Windows實現Flutter環境搭建及配置這一篇就夠了

最近正式入坑Flutter,首先從環境搭建開始,看了網上好多關於Windows環境搭建的資料,基本都是按官方文件寫的,看完的感受是,還不如直接去看官方文件。

官方英文文件傳送門:Get Started: Install on Windows 。

本文主要總結我實際搭建的過程,最後發現不一定按網上那些部落格或者官方文件寫的來也可以搭建成功。

總的來說需要的也就4樣東西,找齊了配置一下就OK;

(1)Flutter SDK (建議下載官網的,下載完直接能用)

(2)下載Dart外掛

(3)下載Flutter外掛

(4)準備ide(Androidstudio或者IntelliJ IDEA)配置flutter的SDK即可

說明

  • IntelliJ IDEA 通過plugins下載的外掛都是放在安裝目錄下的plugins檔案中,自己看一下就明白。
  • Androidstudio 通過plugins下載的外掛是放在預設位置的,這一點和IntelliJ IDEA不太一樣,我本地的預設的路徑是在 C:\Users\.AndroidStudio3.1\config\plugins 中,假如你已經有了Dart和flutter外掛,可以解壓後直接拷貝到該目錄下即可。

詳細的安裝過程如下:

1. 安裝Flutter SDK

首先下載官方文件中 flutter_windows_v0.4.4-beta.zip 壓縮包(如下圖紅框中所示),解壓到自己指定的位置,解壓完資料夾名稱叫做flutter,這就是Flutter SDK了(後面再ide中配置的時候需要)。同時將該資料夾中的bin新增到環境變數中。

2. 安裝Dart和Flutter外掛

(1)Flutter需要如下兩個外掛的支援:

  • Flutter 外掛用來支撐Flutter開發者的流程(執行,除錯,熱載入,等等)
  • Dart外掛則提供程式碼分析(程式碼合法性校驗,程式碼補全等等)

(2)然後在Androidstudio或者IntelliJ IDEA 中下載Dart外掛,假如下不了,那就是沒有進行科學上網的原因,也可以通過科學上網訪問下面的連結進行下載。假如是自己通過如下連結下載的,則把下載後的zip包解壓後將整個資料夾複製到你使用的ide的plugins資料夾中(整個資料夾拷貝到plugins下即可)。

Dart_jb51.rar

(3)然後在Androidstudio或者IntelliJ IDEA 中下載flutter-intellij外掛,假如下不了,那就是沒有進行科學上網的原因,也可以通過科學上網訪問下面的連結進行下載。假如是自己通過如下連結下載的,則把下載後的zip包解壓後將整個資料夾複製到你使用的ide的plugins資料夾中(整個資料夾拷貝到plugins下即可)。

flutter-intellij_jb51.rar

(4)說明:使用自己的ide安裝步驟如下:

1)啟動Android Studio
2) 開啟外掛面板如下圖所示
3)選擇【Browse repositories…】,勾選Flutter plug-in 然後點選 install
4)當提示是否安裝Dart外掛時點選Yes
5)安裝完成後重啟AS

其實到這我們需要準備的東西已經全了,下面看如何配置。

3. 配置Dart和Flutter外掛到我們的ide中

我使用的是IntelliJ IDEA,Androidstudio類似。

開啟ide,Create New Project——>選擇Flutter,選擇SDK路徑後Next——>命名專案名(小寫),選擇專案儲存路徑後ok。

然後進去以後可能你看到並沒有下載專案資源,不要慌,我們配置一下,具體的如下所示,第一張是配置DartSDK的路徑(指向前面flutter的SDK中的 bin\cache\dart.sdk),第二張是配置flutter SDK路徑。配置完成後重啟ide,再重新建立新專案即可,等待的時間會比較長,耐心等待完成就可以開啟flutter之旅了。

另外有幾點說明:

(1)本人是移動端開發所以不管是Androidstudio或者IntelliJ IDEA都已經搭建好了,相關環境的搭建可查閱網路。

(2)本文前面教程中是以IntelliJ IDEA為基礎描述的,假如你使用的是Androidstudio的話需要升級版本至3.1以上,然後在Androidstudio的Plugins中下載Dart和Flutter外掛然後重啟,就會在建立專案的介面出現建立Flutter的選項,然後建立flutter專案,配置本文中描述的flutter-SDK路徑就可以了。

(3)可能有人看網上的資料迷糊,如下圖怎麼來的,其實在咱們下載的flutter_windows_v0.4.4-beta.zip解壓包中有flutter_console.bat,雙擊就可以喚起如下介面。它便是flutter的控制檯,我們可以在flutter控制檯執行 flutter doctor 命令,檢測是否有依賴項未安裝。

(4)文中提到的資料包,有無法下載的可以在文末留言,給我個郵箱,我可以打包共享。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。