學(xué)習(xí)Flutter之前要做一些準(zhǔn)備工作。Flutter前奏曲包括以下內(nèi)容：

1.Flutter安裝和環(huán)境配置

2.VS Code編輯器配置

3.第一個(gè)Flutter應(yīng)用

Flutter安裝和環(huán)境配置

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

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

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

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

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

stall success.png

二、安裝和環(huán)境配置

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

打開 “控制面板 > 系統(tǒng)和安全 > 系統(tǒng) > 高級系統(tǒng)設(shè)置 > 環(huán)境變量”。

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

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

envir_setting.png

然后運(yùn)行下面

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

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

重啟 Windows以完全應(yīng)用此更改。

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

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命令來執(zhí)行Flutter的安裝程序了，經(jīng)過一段時(shí)間的下載和安裝，F(xiàn)lutter會輸出安裝結(jié)果：

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

fdoctor success.png

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

VS Code編輯器配置

你可以使用任意一款文本編輯器結(jié)合我們提供的命令行工具來構(gòu)建 Flutter 應(yīng)用程序。當(dāng)然，更推薦的是使用我們開發(fā)的文本編輯器插件之一，來優(yōu)化開發(fā)的使用體驗(yàn)。支持 Android Studio, IntelliJ 以及 VS Code。

這里使用VS Code編輯器，它包含了運(yùn)行和調(diào)試 Flutter 應(yīng)用程序的輕量級編輯器。

如果想用Android Studio 點(diǎn)這里 傳送門

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

2.安裝Dart Code 插件

（1）執(zhí)行 View>Command Palette…

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

（3）點(diǎn)擊 ‘OK’ 重新加載 VS Code
3.Flutter Doctor 來驗(yàn)證你的配置

（1）依次執(zhí)行 View>Command Palette…

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

（3）在日志打印窗口的 ‘OUTPUT’ 標(biāo)簽中查看打印出的日志信息，看看有沒有報(bào)錯

VS code dart.png

第一個(gè)Flutter應(yīng)用

前兩步都完成后，就可以進(jìn)行這個(gè)激動人心的時(shí)刻了，可以運(yùn)行我們的第一個(gè)應(yīng)用，what？還沒寫代碼呢，運(yùn)行個(gè)毛線？？？

一、安裝這個(gè)應(yīng)用程序

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

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

在這個(gè)項(xiàng)目的文件夾中，和項(xiàng)目業(yè)務(wù)相關(guān)的代碼都在 lib/main.dart 中。

mainDart.png

二、運(yùn)行這個(gè)程序

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

result1.png

三、嘗試一下熱重載

Flutter 提供了一種非常高效的開發(fā)方式，叫做熱重載 ，這個(gè)功能可以在應(yīng)用程序運(yùn)行的狀態(tài)下替換部分代碼，并且運(yùn)行中的程序不會丟失任何狀態(tài)

舉個(gè)栗子，我想把屏幕上展現(xiàn)的字符串改一下

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

result2.png

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

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

如果想用Android Studio開發(fā)，初體驗(yàn)可以看這個(gè)

Flutter 安裝和初體驗(yàn)

安裝過程填坑可以看這個(gè)

Flutter開發(fā)環(huán)境配置以及踩坑

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://caipiao93.cn/18389.html