學習Flutter之前要做一些準備工作。Flutter前奏曲包括以下內容：

1.Flutter安裝和環境配置

2.VS Code編輯器配置

3.第一個Flutter應用

Flutter安裝和環境配置

一、Flutter的下載（以Windows為例）

1.獲取flutter，先使用git去克隆遠程倉庫到本地，按照官方建議，我們選擇beta分支

如果沒有下載git的話先下載一下，下載并且安裝完成后在你想安裝的目錄下，右擊選擇 git bash。然后輸入

git clone -b beta https://github.com/flutter/flutter.git 

就是這樣，經過漫長的等待后...（如果第一次失敗了，多試兩次可能就ok了）

stall success.png

二、安裝和環境配置

下載成功后，為了可以在任意的終端會話使用 flutter 命令，你需要添加它到你的 PATH 環境變量：

打開 “控制面板 > 系統和安全 > 系統 > 高級系統設置 > 環境變量”。

1.在用戶變量下，檢測是否存在 “Path” 的環境變量：
如果這個 Path 變量已經存在了，就添加;到原來的 Path 值的末尾，并且加上 flutter\bin 的全路徑。

2.如果這個 Path 變量不存在，就要在用戶變量下創建新的 Path 的變量名，并且它的變量值設置為 flutter\bin 的全路徑。

envir_setting.png

然后運行下面

注意：Users/didi/google/flutter需要替換為你本地Flutter項目的路徑

export PATH=$PATH:/Users/didi/google/flutter/bin

重啟 Windows以完全應用此更改。

注意：
為了讓Flutter在安裝過程中使用國內的鏡像。需要聲明PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL兩個環境變量，執行如下兩行命令

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

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

envir storage.png envir pub.png

就像這樣：

enviroment.png

以上步驟完成后，我們就可以通過flutter doctor命令來執行Flutter的安裝程序了，經過一段時間的下載和安裝，Flutter會輸出安裝結果：

注意:
要在命令提示符或者 PowerShell 窗口運行此flutter doctor命令。目前， Flutter 還不支持像 Git Bash 這樣子的第三方shell。

fdoctor success.png

第一次運行 flutter 命令 （比如 flutter doctor ），它會下載自己的依賴庫并且自行編譯。后續運行 flutter 命令就會很快了。

VS Code編輯器配置

你可以使用任意一款文本編輯器結合我們提供的命令行工具來構建 Flutter 應用程序。當然，更推薦的是使用我們開發的文本編輯器插件之一，來優化開發的使用體驗。支持 Android Studio, IntelliJ 以及 VS Code。

這里使用VS Code編輯器，它包含了運行和調試 Flutter 應用程序的輕量級編輯器。

如果想用Android Studio 點這里 傳送門

1.安裝VS Code
https://code.visualstudio.com/

2.安裝Dart Code 插件

（1）執行 View>Command Palette…

（2）在擴展插件安裝面板的輸入框輸入 dart code 關鍵詞，在顯示的列表中選擇 ‘Dart Code’ 插件，然后點擊 Install

（3）點擊 ‘OK’ 重新加載 VS Code
3.Flutter Doctor 來驗證你的配置

（1）依次執行 View>Command Palette…

（2）輸入 ‘doctor’, 然后選擇 ‘Flutter: Run Flutter Doctor’ 命令

（3）在日志打印窗口的 ‘OUTPUT’ 標簽中查看打印出的日志信息，看看有沒有報錯

VS code dart.png

第一個Flutter應用

前兩步都完成后，就可以進行這個激動人心的時刻了，可以運行我們的第一個應用，what？還沒寫代碼呢，運行個毛線？？？

一、安裝這個應用程序

1. 啟動 VS Code
2. 依次執行 View>Command Palette…
3. 輸入 ‘flutter’，選擇 ‘Flutter: New Project’ 命令
4. 輸入項目名稱（例如：myapp），回車
5. 找到一個用于保存項目的目錄，然后點擊藍色的確認按鈕
6. 項目會自動進行創建，創建完畢之后，main.dart 文件會被自動打開

以上的命令創建了一個名叫 myapp 的 Flutter 項目，并且放在 ‘myapp’ 文件夾中。這是一個很簡單的，基于 Material 組件 的項目。

在這個項目的文件夾中，和項目業務相關的代碼都在 lib/main.dart 中。

mainDart.png

二、運行這個程序

1. 確保在 VS Code 的右下角能看到目標設備的名稱
2. 使用鍵盤上的 F5 按鈕，或者依次執行 Debug>Start Debugging
3. 等待應用程序啟動
4. 如果一切正常，構建完應用程序之后，你就可以在你的手機或者模擬器上看到應用程序的起始界面了

result1.png

三、嘗試一下熱重載

Flutter 提供了一種非常高效的開發方式，叫做熱重載 ，這個功能可以在應用程序運行的狀態下替換部分代碼，并且運行中的程序不會丟失任何狀態

舉個栗子，我想把屏幕上展現的字符串改一下

1. VSCode開發編輯器中打開 lib/main.dart 文件
2. 把頁面顯示的字符串'Learning flutter' 修改為 'I like flutter'
3. 不需要點擊 ‘Stop’ 按鈕；讓應用程序繼續運行。只需要將代碼 全部保存 (cmd-s / ctrl-s)，或者點擊 熱重載 按鈕（那個綠色的帶箭頭的轉圈圖標按鈕）你就可以看到你的修改已經被執行了。

result2.png

這個熱重載太酷了，這立馬就能看到修改效果的體驗確實很棒[QAQ]和在Android Studio改動一個小地方后看到效果所要等待的時間沒有可比性.....在這個方面，Flutter確實略勝一籌。

這里我們的前奏曲就結束了，過程這樣順下來還是很簡單的，但是在實際操作的過程還是會遇到很多小問題的，耐者住寂寞都可以搞定的。畢竟能用耐心解決的問題都不是問題哈。

如果想用Android Studio開發，初體驗可以看這個

Flutter 安裝和初體驗

安裝過程填坑可以看這個

Flutter開發環境配置以及踩坑

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.kwpm.com.cn/18389.html