Flutter

• Flutter谷歌的移動端UI框架，使用Dart語言開發(fā)，可以快速的在iOS和Android上構建高質量的原生用戶界面。

以往的跨平臺框架

• WebView，這是第一個跨平臺框架，基于JavaScript 和 WebView 例如 Cordova、PhoneGap、APPCan、Ionic等，應用程序可以編寫成Html，并最終在移動平臺的Webview中顯示，并通過JavaScript interface和原生交互。

  缺點：

  • 加載速度慢，達不到原生UI體驗。
  • 內存消耗比較大。
  • 手勢、動畫和原生差距較大。
  • 相關原生功能支持有限。

• 響應式視圖，原生體驗的第二代跨平臺框架，如ReactNative/Weex,生成虛擬DOM，并進一步對應生成原生的組件，讓頁面由原生組件組成，來到達原生的體驗。JS代碼和原生代碼本身都是很快的，瓶頸經常發(fā)生在當我們視圖從一邊轉向另一邊時，所以構建高質量的應用程序時，我們必須將使用橋接的次數控制到最小。

  缺點：

  • 虛擬DOM和原生組件的溝通需要Bridge。
  • 一些復雜的交互組件和動畫性能上表現達不到原生效果。
  • 各平臺之間的兼容問題。

• Flutter，第三代跨平臺框架，Flutter也提供響應式的視圖，Flutter采用不同的方法避免由JavaScript橋接器引起的性能問題，即用名為Dart的程序語言來編譯，Dart是用預編譯的方式編譯多個平臺的原生代碼，這允許Flutter直接與平臺通信，同時使用Skia圖形引擎來完成圖形、文本、圖像、動畫等繪制，擁有自己獨立的一套圖形系統(tǒng)，不再依賴于原生。

• 更多內容見

  Flutter中文網
  

  移動開發(fā)新利器 | 一文深入了解 Flutter 界面開發(fā)

  下一代移動端跨平臺框架-Flutter大解密

開始使用

• 現在按照Flutter中文網上面的資料，做Demo體驗下Flutter。更多內容后期抽空探索。

• 要獲得Flutter，請先使用git克隆Flutter，然后將該flutter工具添加到您的用戶路徑。運行 flutter doctor 顯示您可能需要安裝的剩余依賴項。

• 獲取Flutter SDK

  git clone -b beta https://github.com/flutter/flutter.git
  

• 修改環(huán)境變量 open ~/.bash_profile 將下面內容加入配置文件，并source ~/.bash_profile 刷新當前終端窗口。

  export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內用戶需要設置
  export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內用戶需要設置
  export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH
  
  //注意：PATH_TO_FLUTTER_GIT_DIRECTORY 為你flutter的路徑，比如“~/document/code”
  

• 運行 flutter doctor

  一般的錯誤會是xcode或Android Studio版本太低、或者沒有ANDROID_HOME環(huán)境變量等，請按照提示解決。

• Android Studio安裝Flutter和Dart插件，在插件搜索中搜索Flutter，安裝重啟studio。

  • Flutter插件： 支持Flutter開發(fā)工作流 (運行、調試、熱重載等).

  • Dart插件： 提供代碼分析 (輸入代碼時進行驗證、代碼補全等).

• 創(chuàng)建一個新應用

  • 選擇 File>New Flutter Project

  • 選擇 Flutter application 作為 project 類型

  • 然后點擊 Next輸入項目名稱 (如 myapp), 然后點擊 Next

  • 點擊 Finish等待Android Studio安裝SDK并創(chuàng)建項目

  • 在項目目錄中，您應用程序的代碼位于 ==lib/main.dart.==

• 下面用豆瓣電影的API做了一個簡易丑陋的Demo，主要是體驗Flutter創(chuàng)建界面、網絡請求、數據解析的過程。

項目結構圖

丑陋的運行效果

https://github.com/HappyMiao/FlutterDemo