Flutter實戰(zhàn)電子書
Flutter中文網(wǎng)
Flutter 常用命令行
bug: 修復命令行不可用的問題
備注：最近在琢磨學習Flutter，主要是參考學習上面資料，首先表示大神辛苦整理表示感謝，下面多是參考上面總結(jié)類似于筆記，便于后續(xù)參考。

1. 原生開發(fā)和跨平臺開發(fā)對比

• 原生開發(fā)的優(yōu)點：
  ????* 原生系統(tǒng)控件渲染ui樣式，性能高，動畫流暢，滑動手勢等比較好處理，整體用戶體驗好。
  ????* 系統(tǒng)提供了全部功能訪問的api，可以直接訪問，比如攝像頭，定位等功能
• 原生開發(fā)缺點：
  ????* 開發(fā)成本高，每一個平臺都是專有系統(tǒng)和api開發(fā)都需要專業(yè)人員開發(fā)，多平臺涉及到的產(chǎn)品測試資源也多，提升了整個產(chǎn)品的研發(fā)成本
  ????* 版本更新周期長，一版功能由研發(fā)到測試再到發(fā)布上線審核通過跨的周期比較長，已不太適合當前移動互聯(lián)網(wǎng)快速發(fā)展和功能快速迭代更新。
• 相對比跨平臺開發(fā)則是將原生優(yōu)缺點顛倒過來，多數(shù)功能跨平臺，原生平臺更多是支撐作用，節(jié)省開發(fā)成本，跨平臺多數(shù)支持熱更新，無需發(fā)版，提升版本迭代功能，同樣缺點就是不能直接訪問系統(tǒng)某些功能，渲染也不是原生控件直接渲染導致用戶體驗很差。

即原生技術(shù)優(yōu)缺點整理：
* 使用系統(tǒng)ui繪制引擎，性能好，動畫流暢，手勢事件響應(yīng)快，用戶體驗好
* 系統(tǒng)提供全部終端特別是硬件功能api，比如攝像頭，定位，各種傳感器等
* 開發(fā)成本高，開發(fā)周期相對跨平臺要長
跨平臺的優(yōu)缺點：
* 項目大部分功能一套代碼搞定，相應(yīng)的原生平臺提供支持作用，即跨平臺機制。
* 多數(shù)跨平臺支持熱更新，版本迭代相對于原生迭代的快
* 開發(fā)成本相對比較低，開發(fā)周期也相對比較快
* 不能徹底拋棄原生，需要原生提供支持
* 性能達不到原生的效果

2. 當前跨屏技術(shù)實現(xiàn)及其對比

• 當前跨平臺開發(fā)技術(shù)下面三種：原生+h5(js)，原生控件+js，自研UI引擎+原生三種，下面是大神整理的三種的區(qū)別，直接復用：

  
  
  跨平臺技術(shù)對比
• 多數(shù)項目中使用最多的是第一種實現(xiàn)，第二種實現(xiàn)以fc的react native框架居多，第一種更多的也是webview渲染頁面，js和native通信，雖有框架好像用的也不多，當前主要是介紹第三種（個人對rn研究也不深），所以前兩種就不深入介紹，有興趣可以找其他文檔或者上面參考文章。

3. Flutter特性

• flutter樣式層實現(xiàn)不依賴與原生系統(tǒng)控件，自研2d樣式繪制引擎skia，跨平臺而且高性能
• flutter是基于dart開發(fā)語言研發(fā)的，dart語言具有多種研發(fā)模式：靜態(tài)編譯（java）和動態(tài)編譯（js），開發(fā)階段可以動態(tài)編譯解釋方式提升測試，發(fā)包可以使用靜態(tài)編譯方式在運行時比著js這樣邊解釋邊執(zhí)行語言更快執(zhí)行，具體如下：
  ????如上開發(fā)效率高
  ????高性能
  ????快速分配內(nèi)存
  ????類型安全
  ????開發(fā)文檔及其問題平臺齊全，有助于開發(fā)學習
  ????針對dart語言，剛?cè)腴T，上面都是大神文章總結(jié)的，后續(xù)學習過程中比對。

即Flutter的優(yōu)勢：
* 跨平臺，支持ios和Android兩個平臺開發(fā)
* 自研ui引擎skia，Dart作為runtime，text作為文本排版引擎，不依賴于原生系統(tǒng)ui，ui性能比較高
* 支持開發(fā)過程中熱更新提升開發(fā)效率
* 當前flutter發(fā)布到3.0，系統(tǒng)還不夠完善開發(fā)生態(tài)也不夠完善。
Flutter 使用場景：

• 跨平臺：ios，Android，web
• 腳本和服務(wù)端（Dart語言）

4. Flutter框架層級結(jié)構(gòu)

   
   
   flutter框架層級

• 如圖所示，可以將其層級看做三層：底層的具體實現(xiàn)引擎，中層的底層實現(xiàn)封裝，上層的對外研發(fā)封裝，項目開發(fā)也多是使用上層的框架封裝等。

5. Flutter環(huán)境搭建

• 環(huán)境搭建主要是mac+Androidstudio，其他參考大神文章。
• 安裝flutter
  ????* 去flutter sdk 官網(wǎng)下載對應(yīng)包，并解壓到對應(yīng)的安裝文件夾。
  ??????* flutter的sdk分為stable、beta、main三個分支，對應(yīng)著正式版本、beta測試版本和開發(fā)版本，main對應(yīng)著git的master分支，屬于開發(fā)版本，功能新但是問題多，平時項目開發(fā)更多使用stable版本。前面兩個版本對應(yīng)著官網(wǎng)提供了zip下載，下載后解壓縮即可以，后面沒有提供對應(yīng)的zip需要通過git去下載（此為下載Flutter的兩種方式，F(xiàn)lutter的不同分支對應(yīng)不同的下載模式）：

git clone -b main https://github.com/flutter/flutter.git //git下載main分支，下載到本地文件夾 flutter，dart sdk已集成到flutter中所以不需要額外下載dart sdk了。
./flutter/bin/flutter --version //運行命令顯示flutter的版本號 

????* 配置path路徑，將flutter安裝包中的bin等配置到mac系統(tǒng)path文件中。類Android java配置，方便命令行和ide使用
????* 命令行校驗是否安裝成功

• Androidstudio配置
  ????* 安裝對應(yīng)的flutter插件和dart插件
  ????* 類Android工程創(chuàng)建，注意點：是否支持ios和kotilin都是創(chuàng)建過程中的可選項。需要注意的是新版Android studio創(chuàng)建flutter工程后不像老版是直接添加信息創(chuàng)建工程，而是先選擇flutter的sdk后點擊繼續(xù)在輸入對應(yīng)的flutter信息后創(chuàng)建工程。
• 備注mac配置path命令的方法
  ????* 命令行：open .bash_profile 打開命令行文件
  ????* 在文件中按照先前的配置配置好對應(yīng)的命令：export PATH=/Users/www.macpe.cn/flutter/bin:$PATH
  ????* source 。bash_profile 保存命令行文件

6. 第一個Flutter app

• 按照上面步驟可以很方便的Android studio中創(chuàng)建出flutter工程，功能層級如下：

  
  
  flutter工程層級結(jié)構(gòu)
• Android studio確實是很強大的一個ide，大大簡化了ndk和flutter的開發(fā)流程，提升了開發(fā)效率。
• 如圖所示，只是簡單標識一下層級結(jié)構(gòu)，存?zhèn)€印象，后續(xù)會根據(jù)深入學習更進一步深入flutter工程的每一個層級。Android Studio創(chuàng)建第一個Flutter項目：解鎖很詳細
• Flutter 項目在開發(fā)階段為了更好的提升編譯和開發(fā)效率，在微改動的情況下支持熱更新，熱啟動，熱更新分為直接熱更新（通過ide的配置只要點擊保存就更新）還有在ide上提供了閃電按鈕，點擊閃電按鈕可以人為熱更新（建議后者，不然ide可能卡頓）。具體配置參考文章官網(wǎng)：熱更新

7. Flutter常用的命令行命令

   * flutter clean：//清理flutter工程
   * flutter upgrade：//升級flutter sdk及其對應(yīng)的工具
   * flutter channel：//查看當前通道sdk的的信息
   * flutter channel stable //切換本地的flutter channel分支，切換后會自動下載對應(yīng)的分支sdk 需要注意的是完成后
   //需要調(diào)用flutter upgrade再更新一下對應(yīng)的sdk
   * flutter build： //組建工程 
   * 其他對應(yīng)的命令行參考文章或者命令行 flutter help 獲取幫助
   * 配置完路徑后可能存在不能使用命令的問題需要同意一下Android的協(xié)議。
   

參考文章：
Flutter中文官網(wǎng)
Flutter開發(fā)者官網(wǎng)
書籍：Flutter實戰(zhàn)2