Flutter快學(xué)快用24講--04 Hello Flutter：三步法掌握 Flutter，開始你的第一個應(yīng)用
本課時將進(jìn)入 Flutter 開發(fā)實(shí)踐應(yīng)用。在進(jìn)入實(shí)踐應(yīng)用之前，我先講解最基礎(chǔ)的環(huán)境搭建，然后會應(yīng)用 Dart 語言開發(fā)第一個 App — Hello Flutter，最后再講解一些開發(fā)過程中常用的調(diào)試方法和工具。
本課時需要一定的實(shí)踐動手能力，因此在學(xué)習(xí)的時候建議你打開電腦按照里面的步驟進(jìn)行學(xué)習(xí)。
第一步：環(huán)境搭建
環(huán)境構(gòu)建方法在官網(wǎng)已提供了非常詳細(xì)的指引，你可以參考官網(wǎng)指引 《起步:安裝 Flutter》: https://flutterchina.club/get-started/install/。這里我先介紹一些共性的問題，然后再分別從 Mac 系統(tǒng) 和 Windows 系統(tǒng)介紹其中比較有代表性的問題。
常見問題
以下是大家很容易忽視的幾個問題。
環(huán)境要求，你需要注意 Flutter 的環(huán)境要求，很多人都會忽視這一點(diǎn)，導(dǎo)致在安裝過程中遇到問題才會回頭看環(huán)境要求，所以無論自己對配置如何了解，都需要按照官網(wǎng)的指引去檢查每個配置項(xiàng)。
Flutter 下載，請盡量下載當(dāng)前穩(wěn)定版本，避免因?yàn)椴环€(wěn)定版本導(dǎo)致的其他環(huán)境要求，導(dǎo)致安裝不成功。
Android Studio 工具安裝，F(xiàn)lutter 的配置運(yùn)行需要依賴 Android Studio 來完成，因此在安裝之前可以先準(zhǔn)備好 Android Studio 的安裝配置，并且需要了解其中關(guān)于 Flutter 插件和 Dart 插件的安裝，這些在 Flutter 官網(wǎng): https://flutterchina.club/get-started/install/ 有詳細(xì)的解釋說明。
Anroid Studio 出現(xiàn) unable to access android sdk add-on list，出現(xiàn)這個問題，可以修改 Android Studio 安裝目錄 bin 下的 idea.properties 文件，在文件最后一行增加如下配置。
Android Studio 網(wǎng)絡(luò)代理，如果你的網(wǎng)絡(luò)有代理，也需要進(jìn)行配置，如果沒有正確配置，將導(dǎo)致 Andorid Studio 提示 flutter pub upgrade 無法正常更新。
Flutter Doctor 核心點(diǎn)檢查，需要認(rèn)真檢查其中的每一項(xiàng)，對于其中的問題項(xiàng)，Doctor 一般會提供具體的解決方案。
點(diǎn)擊 Finish 長久未響應(yīng)（或者執(zhí)行 flutter pub upgrade 未響應(yīng)），這種情況會出現(xiàn)“This is taking an unexpectedly long time”提示，如果出現(xiàn)這個提示，很大可能是你的鏡像配置沒有按要求配置。你可以參考以下這段配置，第一個是 Flutter 的命令行工具，第二個則是 Dart 的命令行工具，后面兩個鏡像配置很關(guān)鍵。
Flutter SDK path not given，如果在創(chuàng)建 Flutter 項(xiàng)目時候提示“ Flutter SDK path not given“，則點(diǎn)擊 Flutter SDK path 路徑，然后選擇我們前面安裝的 Flutter SDK 路徑即可。
Mac 系統(tǒng)上注意的點(diǎn)
Mac 上的安裝，我這里主要說明 Xcode 和 Mac 下的環(huán)境變量配置。
Xcode 要升級到指定版本以上，由于 Flutter 需要應(yīng)用 iOS 模擬器，因此對 Xcode 版本有一定要求。
Mac 下設(shè)置環(huán)境變量，其中涉及一些環(huán)境變量的配置，雖然網(wǎng)上有很多方法，官網(wǎng)也有提供，但我推薦大家使用如下方法，永久設(shè)置。
配置添加 Flutter 的安裝路徑，一般情況下會安裝在你解壓后運(yùn)行的路徑下。例如，下面我自己安裝后的路徑，安裝完成后確定具體路徑，然后在 bash_profile 文件中增加這行配置即可。
最后再運(yùn)行加載，并運(yùn)行測試。
Windows 系統(tǒng)上注意的點(diǎn)
Widows 系統(tǒng)安裝需注意以下幾點(diǎn)。
環(huán)境變量的設(shè)置，如果在 cmd 下沒有 export 命令，前往系統(tǒng)屬性下 -> 環(huán)境變量，然后新建，按照變量名為 PUB_HOSTED_URL ，變量值為 https://pub.flutter-io.cn ，以及變量名為 FLUTTER_STORAGE_BASE_URL ，變量值為 https://storage.flutter-io.cn 進(jìn)行配置，對應(yīng)到官方文檔如下配置。
配置 Flutter 運(yùn)行環(huán)境，下載完成 Flutter SDK ，并放到指定的 C:\src\ 下，然后再次配置環(huán)境變量，需要在環(huán)境變量名為 PATH 的字段后面增加分號分割，并在分號后增加如下路徑。
如果出現(xiàn)安裝 Android SDK 時無法勾選 SDK ，需要重新卸載安裝。這里需注意，在卸載時需勾選刪除當(dāng)前用戶本地 Android Studio 配置，然后重新安裝時，選擇非 Program Files 目錄。
第二步：創(chuàng)建項(xiàng)目運(yùn)行
上面的配置安裝完成后，我們就開始創(chuàng)建 Flutter 項(xiàng)目，這里我介紹的是 Android Studio IDE 的過程。
選擇新建一個 Start a new Flutter Project ，然后選擇 Flutter Application ，如圖 1。
圖 1 New Flutter Project
然后依次填寫相應(yīng)的 Project name 、Flutter SDK Path（如果配置好了會默認(rèn)填寫上，如果沒有可以去重新選擇）、Project location （具體的項(xiàng)目保存地址）、Descrition ，填寫完成后，點(diǎn)擊下一步，然后點(diǎn)擊 finish 即可。
如果卡在 finish 這個環(huán)節(jié)，請強(qiáng)制退出，然后再重新打開，檢查配置。具體解決辦法可參考共性問題中的“點(diǎn)擊 finish 長久未響應(yīng)”問題。
創(chuàng)建完成后，會看到如圖 2 的項(xiàng)目目錄結(jié)構(gòu)。
圖 2 Flutter 項(xiàng)目目錄結(jié)構(gòu)
成功創(chuàng)建后，我們選擇一個模擬器，然后在運(yùn)行入口文件選擇 main.dart ，最后點(diǎn)擊右側(cè)啟動按鈕進(jìn)行編譯運(yùn)行。 如果下拉沒有模擬器，Android Studio 會提供指引前往配置。
圖 3 運(yùn)行啟動說明
運(yùn)行成功后，將會打開 iPhone 11 模擬器，然后啟動我們的應(yīng)用，如圖 3。
圖 4 iPhone 11 模擬器
以上就成功配置了 Flutter 運(yùn)行環(huán)境和開發(fā)工具。
第三步：實(shí)現(xiàn) Hello Flutter APP
在實(shí)現(xiàn)一些編程之前，我先詳細(xì)介紹工程目錄中每個目錄的作用，其次介紹如何進(jìn)行修改代碼，實(shí)現(xiàn)界面顯示 Hello Flutter，最后再介紹三個常見的調(diào)試方法。
目錄說明
上述圖 2 中已有相關(guān)工程目錄的截圖，我現(xiàn)在分別介紹下每個目錄的作用。
圖 2 Flutter 項(xiàng)目目錄結(jié)構(gòu)
.idea
這個和 Flutter 無關(guān)，這里面主要是保留代碼的修改歷史。
android
這個目錄主要是和 Android 原生平臺交互的工程代碼，其目錄結(jié)構(gòu)和原生的 Android 項(xiàng)目基本一致，但是一些配置和代碼結(jié)構(gòu)是不同的。
ios
這個目錄主要也是和 iOS 原生平臺交互的代碼。
lib
這個目錄下的文件為 Flutter 項(xiàng)目核心代碼，其中包含了一個 main.dart 入口文件。
test
這個目錄下的文件存放 Flutter 項(xiàng)目相關(guān)的測試文件。
pubspec.yaml
該文件為 Flutter 項(xiàng)目配置文件，包括了項(xiàng)目名、項(xiàng)目描述、版本、運(yùn)行環(huán)境以及開發(fā)和正式環(huán)境的第三方庫，該文件與我們熟悉的 package.json 作用是類似的。
pubspec.lock
這是自動生成的文件，里面指明了 pubspec.yaml 等依賴包和項(xiàng)目依賴庫的具體版本號，該文件的功能和我們常見的 package.lock.json 作用類似。
.metadata
這是自動生成的文件，里面記錄了項(xiàng)目的屬性信息。用于切換分支、升級 SDK 使用。
.packages
這里面放置了項(xiàng)目依賴的庫，對應(yīng)在本機(jī)電腦上的絕對路徑，為自動生成文件。如果項(xiàng)目出錯或者無法找到某個庫，可以把這個文件刪除，重新自動配置即可。
.gitignore、README.md 與前端項(xiàng)目中的文件作用是一致的，這里就不詳加說明。
在開發(fā)過程中我們只需要關(guān)注三個核心部分，代碼開發(fā)放在 lib 下，test 存放我們的測試文件，項(xiàng)目配置文件放在 pubspec.yaml 下。
Hello Flutter
分析清楚文件目錄后，在 lib 下修改 main.dart ，在該模塊中打印 Hello Flutter 實(shí)現(xiàn)第一個 Flutter 應(yīng)用開發(fā)。
打開 main.dart ，將文件中 MaterialApp 下的 title 名字修改為 “Two You” ，將 home 下的 title 修改為 “Two You”，相關(guān)代碼如下所示。
將 main.dart 中 Scaffold 下的 body 下的 children 下的第一個 Text 內(nèi)容修改為 “Hello Flutter”，并去掉下面一個 Text，如下圖 5。
圖 5 修改 main.dart 文件的代碼指引
修改完成后，保存文件，然后按照本課時中的”第二步：創(chuàng)建項(xiàng)目運(yùn)行“運(yùn)行本程序即可（如果已經(jīng)運(yùn)行過，保存文件模擬器會熱加載），你將看到如下的結(jié)果，如圖 6 所示。
圖 6 Hello Flutter 運(yùn)行結(jié)果
上面的代碼是基于最開始的 main.dart 進(jìn)行，如果覺得修改原文件比較麻煩，我們可以簡化為如下的代碼：
調(diào)試方法
代碼運(yùn)行調(diào)試在各種語言中都是比較基本的知識點(diǎn)，在 Flutter 中也應(yīng)該掌握，這里我只介紹 Flutter 不同于其他語言的調(diào)試方法，包含以下幾類：
斷點(diǎn)調(diào)試
這個知識點(diǎn)和大家熟悉的 Chrome 的斷點(diǎn)調(diào)試基本一致，核心是在斷點(diǎn)處查看當(dāng)前各個數(shù)據(jù)的狀態(tài)情況，但是需要使用 debug 模式運(yùn)行。
debugger 調(diào)試
在代碼中增加一個斷點(diǎn)語法，可以通過條件式的判斷來進(jìn)行斷點(diǎn)，同樣需要使用 debug 模式運(yùn)行。
界面調(diào)試
為了能夠掌握具體的布局問題，在 Web 端，我們可以通過 Chrome 工具進(jìn)行分析。雖然在 Flutter 中是沒有 Chrome 工具，但是 Flutter 提供了可視化的界面調(diào)試方法。
上面提到的三點(diǎn)，其實(shí)在 Flutter 中提供了一個非常不錯的工具。如果你是在 Android Studio 中的話，你可以直接點(diǎn)擊下圖 7 的按鈕，將為你下載相應(yīng)的組件，然后打開圖 8 的界面調(diào)試框。如果你使用的是非 Android Studio ，可以使用命令行的方式，參考 官網(wǎng): https://flutter.cn/docs/development/tools/devtools/cli 方式，首先安裝 devtools 工具。
安裝完成后，運(yùn)行以下命令啟動運(yùn)行。
圖 7 Flutter 調(diào)試工具按鈕指引
圖 8 Dart DevTools 工具
該套工具的詳細(xì)介紹可以參考 開發(fā)者工具: https://flutter.cn/docs/development/tools/devtools。
總結(jié)
本課時介紹了如何三步開啟第一個應(yīng)用程序 Hello Flutter，包括環(huán)境搭建、創(chuàng)建項(xiàng)目以及運(yùn)行、修改示例代碼。學(xué)完本課時，你需要掌握環(huán)境搭建的方法以及如何創(chuàng)建運(yùn)行項(xiàng)目。
點(diǎn)擊此鏈接查看本課時源碼: https://github.com/love-flutter/flutter-column
