首先,什么是flutter?
Flutter是谷歌爸爸推出的在iOS和Android兩個(gè)平臺(tái)使用Dart語言開發(fā)原生應(yīng)用的移動(dòng)框架.至今(20180705)還未出正式版.
這里吐槽一下:Dart語言的可讀性真的是太差了,各種括號(hào)的嵌套真的頭疼...
其次,為什么用flutter?
原因有很多,可以看下以下文章

5 個(gè)你也許會(huì)喜歡 Google Flutter 的理由
為什么說Flutter是革命性的？
你好，F(xiàn)lutter

然后,怎么用flutter?
因?yàn)槲沂亲鰅OS開發(fā)的,這里簡(jiǎn)單說下mac版搭建Flutter開發(fā)環(huán)境的大概過程

在當(dāng)前終端窗口運(yùn)行以下命令使用Git獲取Flutter SDK，并臨時(shí)設(shè)置PATH變量。

git clone -b beta https://github.com/flutter/flutter.git export PUB_HOSTED_URL=https://pub.flutter-io.cn //國(guó)內(nèi)用戶需要設(shè)置 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國(guó)內(nèi)用戶需要設(shè)置 export PATH=`pwd`/flutter/bin:$PATH 

運(yùn)行以下命令查看是否有依賴關(guān)系需要安裝以完成設(shè)置，此命令檢查環(huán)境并向終端窗口顯示報(bào)告。

flutter doctor 

該命令檢查您的環(huán)境并在終端窗口中顯示報(bào)告。Dart SDK已經(jīng)在捆綁在Flutter里了，沒有必要單獨(dú)安裝Dart。仔細(xì)檢查輸出信息是否需要安裝其他軟件或者執(zhí)行其他任務(wù)(以粗體字顯示)。

第一次運(yùn)行一個(gè)flutter命令（如flutter doctor）時(shí)，它會(huì)下載它自己的依賴項(xiàng)并自行編譯。以后再運(yùn)行就會(huì)快得多。

那么可以cd到你想要?jiǎng)?chuàng)建項(xiàng)目的位置

 flutter create myapp 

這里的項(xiàng)目名稱必須是小寫,執(zhí)行該命令來創(chuàng)建項(xiàng)目
創(chuàng)建完成后在ios文件夾里打開xcworkspace就可以跑了
也可以使用命令

flutter run 

image.png

如果使用命令的話,可以使用flutter的熱重載功能,這也是flutter的一大亮點(diǎn)(當(dāng)然RN也是支持該功能的),即在不重啟應(yīng)用的前提下來刷新頁面

image.png

這里有 hot reload 和 hot restart兩個(gè)選擇.

image.png

restart就是重啟應(yīng)用,reload則是在不重啟應(yīng)用的前提下刷新頁面.
很明顯,后者速度比前者快得多,在開發(fā)調(diào)試時(shí)有著很大優(yōu)勢(shì)

可以簡(jiǎn)單測(cè)試下
lib/main.dart便是當(dāng)前項(xiàng)目的入口,打開后會(huì)發(fā)現(xiàn)其將main函數(shù)指向myapp類

image.png

這段英文注釋講的就是熱加載...我們可以按照其說的,先點(diǎn)擊幾次按鈕,再將primarySwatch的color改成green,再在終端上輸入r,會(huì)發(fā)現(xiàn)記錄的按鈕點(diǎn)擊次數(shù)沒有變?yōu)?,說明沒有重啟,然而顏色卻改變了,說明實(shí)現(xiàn)了在不重啟應(yīng)用的前提下重啟應(yīng)用,也就是熱加載

此外,在vscode上也能進(jìn)行單步,斷點(diǎn),熱加載等調(diào)試

image.png

常用flutter命令

常用命令	含義
--version	查看Flutter版本
-h或者--help	打印所有命令行用法信息
analyze	分析項(xiàng)目的Dart代碼。
build	Flutter構(gòu)建命令。
channel	列表或開關(guān)Flutter通道。
clean	刪除構(gòu)建/目錄。
config	配置Flutter設(shè)置。
create	創(chuàng)建一個(gè)新的Flutter項(xiàng)目。
devices	列出所有連接的設(shè)備。
doctor	展示了有關(guān)安裝工具的信息。
drive	為當(dāng)前項(xiàng)目運(yùn)行Flutter驅(qū)動(dòng)程序測(cè)試。
format	格式一個(gè)或多個(gè)Dart文件。
fuchsia_reload	在Fuchsia上進(jìn)行熱重載。
help	顯示幫助信息的Flutter。
install	在附加設(shè)備上安裝Flutter應(yīng)用程序。
logs	顯示用于運(yùn)行Flutter應(yīng)用程序的日志輸出。
packages	命令用于管理Flutter包。
precache	填充了Flutter工具的二進(jìn)制工件緩存。
run	在附加設(shè)備上運(yùn)行你的Flutter應(yīng)用程序。
screenshot	從一個(gè)連接的設(shè)備截圖。
stop	停止在附加設(shè)備上的Flutter應(yīng)用。
test	對(duì)當(dāng)前項(xiàng)目的Flutter單元測(cè)試。
trace	開始并停止跟蹤運(yùn)行的Flutter應(yīng)用程序。
upgrade	升級(jí)你的Flutter副本。

搭建Flutter開發(fā)環(huán)境過程中的一些常見問題:
1.-bash: flutter: command not found

export PATH=`pwd`/flutter/bin:$PATH 

如果還是不行,就cd到flutter文件夾的上層文件夾,再去執(zhí)行

export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cnexport PATH=`pwd`/flutter/bin:$PATH 

如果依舊不行,就刪掉舊的flutter文件夾,按照上邊說的重新安裝一次

2.Waiting for another flutter command to release the startup lock...

打開活動(dòng)監(jiān)視器關(guān)掉其余Dart進(jìn)程 

3.RangeError (index): Invalid value: Only valid value is 0: 1

flutter clean 

4.Unable to load asset...

首先圖片目錄要正確,比如

new Image.asset('lib/images/section1.png'), 

其次要在pubspec.yaml文件里加上下邊代碼

 flutter: uses-material-design: true assets: - 'lib/images/section1.png 

https://flutter.io/assets-and-images/

參考文檔:
Flutter官網(wǎng)
Flutter官網(wǎng)中文版
Flutter中文文檔
Flutter教程
Flutter中文開發(fā)者論壇
從環(huán)境搭建到進(jìn)階系列教程
Flutter從配置安裝到填坑指南詳解，F(xiàn)lutter相關(guān)Demo解讀，項(xiàng)目實(shí)例，Dart語法詳解
Flutter 中文用戶組入群號(hào): 482462550

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