Flutter 是什么

Flutter 是谷歌的移動(dòng) UI 框架，可以快速在 iOS 和 Android 上構(gòu)建高質(zhì)量的原生用戶界面...

balabalabala 的這些介紹網(wǎng)上一搜一大堆，這次的分享主要是在 Udemy 上購(gòu)買了 Max 老師關(guān)于 Flutter 《
Learn Flutter & Dart to Build iOS & Android Apps》的課程，然后一邊學(xué)習(xí)一邊歸納總結(jié)自己的理解。

Flutter 前期準(zhǔn)備

• 安裝 Flutter SDK
• 安裝 Android Studio （只要利用 AVD 虛擬機(jī)來(lái)虛擬運(yùn)行我們 Flutter 應(yīng)用）
• IDE 我跟 Max 一樣選用 VS Code

更多的安裝使用介紹，可參考官方安裝步驟

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

對(duì)，你沒(méi)猜錯(cuò)，還是用 Hello world 來(lái)寫(xiě)第一個(gè) Flutter 應(yīng)用

當(dāng)前期準(zhǔn)備就緒，就可以用 Flutter 創(chuàng)建我們的項(xiàng)目，如 flutter create 項(xiàng)目名 ，注意項(xiàng)目名不能加連字符如 hello-world，注意需要小寫(xiě)

From the Pubspec format description:
DO use lowercase_with_underscores for package names.
Package names should be all lowercase, with underscores to separate words,
just_like_this. Use only basic Latin letters and Arabic digits: [a-z0-9_].
Also, make sure the name is a valid Dart identifier -- that it doesn't start
with digits and isn't a reserved word.

flutter create hello_world
'或'
flutter create helloworld

目錄結(jié)構(gòu)

項(xiàng)目創(chuàng)建后，簡(jiǎn)單介紹幾個(gè)重要的目錄與文件

• android 與 ios 目錄：分別持有各自平臺(tái)的原生代碼，是編譯時(shí)所需內(nèi)容，只有細(xì)微調(diào)整不同平臺(tái)代碼的時(shí)候才需要訪問(wèn)修改
• build 目錄：編譯完成后的內(nèi)容
• lib 目錄：里面放著程序源碼
  • main.dart 文件：入口文件
• test 目錄：自動(dòng)化測(cè)試
• pubspec.yaml 文件：整個(gè)項(xiàng)目的配置與依賴信息

入口文件與入口函數(shù)

• Flutter 的入口文件：位于 /lib/main.dart，并文件名不能修改（此處我們將創(chuàng)建項(xiàng)目后原 main.dart 文件內(nèi)容清空，從無(wú)到有寫(xiě)一次）
• Flutter 的入口函數(shù)： main，不帶返回值，也寫(xiě)作 void main
• 先加入 void main，此處可使用 dart /lib/main.dart 來(lái)運(yùn)行并查看控制態(tài)輸出（我沒(méi)有單獨(dú)安裝 dart，所以就沒(méi)有單獨(dú)運(yùn)行）

'main.dart'

void main() {
  print('app running....'); // 控制臺(tái)輸出
}

提高 Flutter 的開(kāi)發(fā)體驗(yàn)

VS Code 上的必備擴(kuò)展：Flutter，安裝后在 dart 文件下會(huì)有自動(dòng)格式化，語(yǔ)法提示等強(qiáng)大的功能。

VS Code Flutter 擴(kuò)展

運(yùn)行程序

• 打開(kāi) Android Studio 并開(kāi)啟 AVD Manager 選其中一個(gè)虛擬器
  

  AVD Manager

• 命令行方式運(yùn)行(推薦使用，因有熱加載等更多功能)：運(yùn)行入口文件 /lib/main.dart 的入口函數(shù) main 開(kāi)始運(yùn)行

flutter run

• IDE 方式運(yùn)行：VS Code 上使用 Debug 工具 -> 運(yùn)行并選擇 Flutter & Dart(若當(dāng)前焦點(diǎn)在 dart 文件里，則自動(dòng)跳過(guò)選擇步驟并自動(dòng)啟動(dòng))
  運(yùn)行完畢后，終端上出現(xiàn) I/flutter ( xxxx): app running....

而我們的 Flutter 應(yīng)用需要將內(nèi)容掛載到設(shè)備上，目前沒(méi)這個(gè)步驟，因此虛擬器上只出現(xiàn)白屏

未掛載 白屏

到這里我們已經(jīng)成功運(yùn)行 Flutter 應(yīng)用了，只是目前還沒(méi)將界面掛載到設(shè)備上，下節(jié)課會(huì)一起學(xué)習(xí)將界面（組件樹(shù)）掛載到設(shè)備上。