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

5 個你也許會喜歡 Google Flutter 的理由
為什么說Flutter是革命性的？
你好，Flutter

然后,怎么用flutter?
因為我是做iOS開發的,這里簡單說下mac版搭建Flutter開發環境的大概過程

在當前終端窗口運行以下命令使用Git獲取Flutter SDK，并臨時設置PATH變量。

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

運行以下命令查看是否有依賴關系需要安裝以完成設置，此命令檢查環境并向終端窗口顯示報告。

flutter doctor 

該命令檢查您的環境并在終端窗口中顯示報告。Dart SDK已經在捆綁在Flutter里了，沒有必要單獨安裝Dart。仔細檢查輸出信息是否需要安裝其他軟件或者執行其他任務(以粗體字顯示)。

第一次運行一個flutter命令（如flutter doctor）時，它會下載它自己的依賴項并自行編譯。以后再運行就會快得多。

那么可以cd到你想要創建項目的位置

 flutter create myapp 

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

flutter run 

image.png

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

image.png

這里有 hot reload 和 hot restart兩個選擇.

image.png

restart就是重啟應用,reload則是在不重啟應用的前提下刷新頁面.
很明顯,后者速度比前者快得多,在開發調試時有著很大優勢

可以簡單測試下
lib/main.dart便是當前項目的入口,打開后會發現其將main函數指向myapp類

image.png

這段英文注釋講的就是熱加載...我們可以按照其說的,先點擊幾次按鈕,再將primarySwatch的color改成green,再在終端上輸入r,會發現記錄的按鈕點擊次數沒有變為0,說明沒有重啟,然而顏色卻改變了,說明實現了在不重啟應用的前提下重啟應用,也就是熱加載

此外,在vscode上也能進行單步,斷點,熱加載等調試

image.png

常用flutter命令

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

搭建Flutter開發環境過程中的一些常見問題:
1.-bash: flutter: command not found

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

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

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...

打開活動監視器關掉其余Dart進程 

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官網
Flutter官網中文版
Flutter中文文檔
Flutter教程
Flutter中文開發者論壇
從環境搭建到進階系列教程
Flutter從配置安裝到填坑指南詳解，Flutter相關Demo解讀，項目實例，Dart語法詳解
Flutter 中文用戶組入群號: 482462550

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/18164.html