首頁/ 汽車/ 正文

「Dart語言教程」1.DartFlutter開發環境配置

本教程使用的作業系統是Windows 11,後續的教程也將以Windows為主要開發環境來學習和使用Dart程式語言,學習Dart語言的主要目的是進行Flutter應用程式的開發,因此,我沒有下載Dart官方提供的SDK開發包,而是使用Flutter SDK中整合的Dart語言SDK開發包,完成Flutter SDK配置之後,我們既可以在此環境下開發Dart應用程式,也可以在此環境下開發Flutter應用程式。Flutter應用開發使用了Android Studio整合開發環境,Dart應用開發則使用Visual Studio Code進行開發。Dart應用開發以學習這種語言及其核心庫為目標,Flutter應用開發則以實際專案為主要目標。下文將介紹在安裝Flutter SDK中遇到的問題及其對應的解決方法。

下載SDK包

進行Dart/Flutter應用開發時,首先需要下載對應的軟體開發工具包,即我們通常所說的SDK,開啟Flutter的官方網站(www。flutter。dev),下載Flutter SDK的壓縮包,目前最新的SDK版本為3。0。2。下載完成之後將其解壓到指定位置,注意在設定Flutter SDK的解壓路徑時,儘可能的保持路徑簡單,不要含有空格或其它多位元組字元,比如直接將其設定為d:\flutter3。0。2即可。文字將採用此路徑作為Flutter SDK的解壓路徑。

環境變數

完成Flutter SDK的解壓工作之後,接下來我們需要配置三個環境變數:PUB_HOSTED_URL、FLUTTER_STORAGE_BASE_URL和Path變數。

「Dart語言教程」1.Dart/Flutter開發環境配置

表1

注意最後的Path環境變數是向其追加一個路徑,而不是將原有的Path變數的值設定為上述的內容。

診斷Flutter環境

完成環境變數的設定之後,重新啟動一個命令列視窗,執行下面的命令進行診斷:

flutter doctor

這個命令可能會執行一段時間,請耐心等待。執行完上述的診斷命令之後,它會提示你當前系統都有哪些專案是無法滿足開發Flutter開發或者是可能存在問題的。按照doctor報告中的錯誤或警告逐項進行修復。下面列出我在安裝Flutter SDK時所遇到的問題。

Android命令列工具沒有安裝

啟動Android Studio應用程式,開啟SDK管理器,並切換至SDK Tools標籤,選中下圖中的命令列工具,進行安裝。

「Dart語言教程」1.Dart/Flutter開發環境配置

圖1

安裝Chrome瀏覽器

Windows 11預設使用了Edge瀏覽器,而doctor認為這個瀏覽器不符合它的標準,當前系統必須得含有一個chrome應用才可以,提示如下圖2所示的錯誤

「Dart語言教程」1.Dart/Flutter開發環境配置

圖2

對於這個錯誤,我也沒有其它更好的辦法可以解決,安裝一個chrome瀏覽器就是了。

Android協議問題

如圖2中的提示,在命令列中執行flutter doctor –android-licenses,所有的提示問題全部選擇”y”,表示接受相應的協議內容,不接受不讓使用啊!

「Dart語言教程」1.Dart/Flutter開發環境配置

圖3

無法訪問maven。google。com問題

開啟D:\flutter3。0。2\flutter\packages\flutter_tools\lib\src\http_host_validator。dart檔案,如果你的Flutter SDK解壓路徑與本文中的解壓路徑不同,請按照實際路徑進行相應地調整。按照下圖4的內容,註釋掉第31行程式碼,新增第32行程式碼。

「Dart語言教程」1.Dart/Flutter開發環境配置

圖4

我們再次執行flutter doctor命令,它的輸出結果全部正常了,如下圖5所示,如果你的系統上安裝的軟體與我的機器上的開發軟體不一樣,可能還會有其它的錯誤提示,按照doctor給出的錯誤報告逐項解決每一個問題,這樣也為後續進行Flutter應用開發做好了準備。

「Dart語言教程」1.Dart/Flutter開發環境配置

圖5

Visual Studio Code安裝Dart外掛

啟動Visual Studio Code應用程式,在線上外掛庫中搜索“Dart”關鍵字,安裝Dart語言外掛,它提供了Dart語言編輯、重構和除錯等功能,Dart語言學習主要是在Visual Studio Code中使用此外掛來進行應用程式開發,安裝完成這個外掛之後,就可以開始Dart語言程式的開發了。

第一個Dart程式

啟動Visual Studio Code程式,開啟一個新的空白目錄,並在這個目錄下新建一個檔案,將其命名為hello-world。dart,在這個檔案中輸入下圖6所示的程式碼。

「Dart語言教程」1.Dart/Flutter開發環境配置

圖6

圖6中第1-3行程式碼定義了一個main函式,這個main函式的函式體中 只含有一條語句,即第2行程式碼,它將字串”hello world”輸出到標準輸出裝置上。注意在第一行程式碼的上一行出現了兩個按鈕:Run和Debug。點選這個“Run“按鈕,在Visual Studio Code的輸出視窗會顯示如下的內容。

「Dart語言教程」1.Dart/Flutter開發環境配置

圖7

藍色文字內容就是我們在程式碼中呼叫print函式的輸出結果。這樣就表示我們現在的開發環境已經可以編譯並執行Dart語言編寫的程式了。開發環境已經配置好了,後續將陸續介紹Dart/Flutter應用程式開發相關的內容。

總結

萬事開頭難,學習一種語言或一個框架,其最大的一個障礙其實是它的開發環境的準備工作,如果沒有合適的、可以使用的開發環境,只從閱讀文件是無法編寫出正確、可用的應用程式,本文是Dart程式語言學習的第一篇文章,它的目的就是配置其開發環境,如果你已經能夠正確地執行第一個程式,那麼,恭喜你來到了Dart/Flutter的世界,之後,我將和你一同探尋Dart/Flutter的精彩。謝謝閱讀,我們下一篇文章見。

相關文章

頂部