在開始之前你需要有
flutter的環(huán)境，可以參考我另一篇Flutter--macOS安裝與配置進(jìn)行初探的準(zhǔn)備工作。
新建項(xiàng)目注意以下兩點(diǎn)
- 項(xiàng)目的路徑不能包含中文，否則運(yùn)行會出錯(cuò)。
- 項(xiàng)目名稱不能出現(xiàn)大寫，為了可讀性一般以
_區(qū)分。
1、 終端體驗(yàn)
進(jìn)入到你想新建項(xiàng)目的目錄，例如桌面，通過flutter create命令創(chuàng)建
$ cd Dektop
~/Desktop $ flutter create demo_flutter
Creating project demo_flutter...
demo_flutter/ios/Runner.xcworkspace/contents.xcworkspacedata (created)
......
All done!
......
In order to run your application, type:
$ cd demo_flutter
$ flutter run
Your application code is in demo_flutter/lib/main.dart.
demo_flutter運(yùn)行
$ cd demo_flutter
~/Desktop/demo_flutter $ flutter run
$ flutter run
No supported devices connected.
這是因?yàn)楫?dāng)前沒有可運(yùn)行的設(shè)備，可通過手機(jī)連接電腦(蘋果手機(jī)需要配置賬號或證書),也可手動去Android studio或者xcode中打開模擬器，也可通過終端打開模擬器(請看Flutter--macOS安裝與配置中關(guān)于Device部分)
如果只有一個(gè)設(shè)備,flutter run會直接運(yùn)行到當(dāng)前設(shè)備中
~/Desktop/demo_flutter $ flutter run
Launching lib/main.dart on iPhone 11 Pro Max in debug mode...
Running Xcode build...
......
如果有多個(gè)設(shè)備需要通過可選參數(shù)選擇一個(gè)-d <deviceId>(deviceId 為 第一個(gè) ?后面的名字)或者全部-d all設(shè)備運(yùn)行
$ flutter run
More than one device connected; please specify a device with the '-d <deviceId>'
flag, or use '-d all' to act on all devices.
Android SDK built for x86 64 ? emulator-5554 ?
android-x64 ? Android 10 (API 29) (emulator)
iPhone 11 ? EFED2808-8BD3-4E4F-99B5-D91F68A3ECE8 ? ios
? com.apple.CoreSimulator.SimRuntime.iOS-13-2 (simulator)
//例
$ flutter run emulator-5554
Using hardware rendering with device Android SDK built for x86 64. If you get
graphics artifacts, consider enabling software rendering with
項(xiàng)目打開效果在本文最后
?? To hot reload changes while running, press "r". To hot restart (and rebuild
state), press "R".
運(yùn)行后終端輸出中的這句話是說flutter在 debug模式下很特別的地方，也就是hot reload(熱重載)，就是就是可以在項(xiàng)目運(yùn)行情況下按下r鍵生效代碼并重新渲染當(dāng)前頁面，按下R建可以完成全部在運(yùn)行的情況下生效代碼修改和完成重新渲染到入口，類似于重啟
2、Android Studio體驗(yàn)
打開Android Studio，選擇第二項(xiàng)
new Flutter.png
第一個(gè)為新建一個(gè)
Flutter應(yīng)用程序，后面三個(gè)為Flutter插件，Flutter包，Flutter組件，這幾個(gè)本文不作詳細(xì)說明，以后再寫文展開說。
new flutter2.png
注意:Flutter SDK選項(xiàng)切勿修改,除非有多個(gè)版本SDK
new flutter3.png
new flutter4.png
new flutter5.png
flutter工程項(xiàng)目目錄說明
-
adnroid-- 安卓工程項(xiàng)目目錄 -
.iml-- 當(dāng)前項(xiàng)目目錄的一些配置信息文件 -
ios-- 蘋果工程項(xiàng)目目錄 -
lib--dart代碼文件目錄 -
pubspec.lock-- 依賴庫&插件的配置文件的記錄文件 -
pubspec.yaml-- 依賴庫&插件的配置文件 -
test-- 單元測試目錄
項(xiàng)目運(yùn)行效果
run app.png
這是一個(gè)記錄點(diǎn)擊按鈕次數(shù)的功能，按下右下角的按鈕，中間的數(shù)字隨之增加，如果你是
android studio運(yùn)行的，可以找到界面重載按鈕，或者是終端運(yùn)行的，可以按下 R,來體驗(yàn)flutter的hot reload熱重載功能
