Flutter跨平臺框架（Dart語言）

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，并且Flutter是完全免費、開源的。(-中文網；-英文網)

成都創新互聯公司從2013年成立，是專業互聯網技術服務公司，擁有項目網站設計制作、成都網站制作網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元曲沃做網站,已為上家服務,為曲沃各地企業和個人服務,聯系電話:18982081108

Flutter是一種趨勢，勢必會取代RN，成為最主流的跨平臺開發框架，基于Dart語言。ios開發必須Mac電腦。android開發window、linux、Mac均可。

為什么Flutter開發APP性能最接近原生，前端程序員請關注

Flutter是谷歌公司推出的跨終端的開發框架，支持Android、iOS和WEB終端。1.0版在2018年12月5日發布，目前的最新版本是1.5，它采用的開發語言是Dart，Dart也是谷歌開發的計算機編程語言，語法類似C，是編譯型語言：

hello world例子，打印字符串“Hello World!”：

1、沒有橋接層

React Native、Weex等技術都是跨終端的框架，然而性能跟原生App存在很大差距。這是由于它們的工作原理決定的：

React Native、Weex等技術多了一個橋接層，所以界面渲染會慢一些，由于UI渲染非常頻繁，想要不卡頓，基本上比較難，性能和用戶體驗跟原生代碼有差距。而這恰恰是Flutter的優勢所在：

Dart可以被編譯成不同平臺的本地代碼，讓Flutter不通過橋接層直接跟平臺通信，自然性能會快一些。

2、編譯執行

JavaScript是解釋執行的，Dart是編譯執行的，性能誰好一目了然。

3、Flutter Engine虛擬機

Flutter是依靠Flutter Engine虛擬機在iOS和Android上運行的，Flutter Engine使用C/C++編寫，開發人員通過Flutter框架直接和API在內部進行交互，所以具有輸入低延遲和UI渲染高幀速率的特點。除了這特點之外，Flutter還提供了自己的小部件，Flutter小部件是使用從React獲取靈感的現代框架構建的。 中心思想是您使用小部件構建UI。

窗口小部件根據其當前配置和狀態描述了它們的視圖。 當窗口小部件的狀態發生更改時，窗口小部件會重建其描述，框架將根據前面的描述進行區分，以確定底層呈現樹從一個狀態轉換到下一個狀態所需的最小更改?？梢灾苯釉贠S平臺提供的畫布上進行描繪，也就是一些核心類庫直接放到虛擬機里面，調用起來更快。

從它的系統結構可以看出，類似安卓的ART(Android Run Time)虛擬機，同樣采用AOT(Ahead of TIme)技術，會在APP安裝時就編譯成機器語言，不再解釋執行，從而優化了APP運行的性能。

4、自帶渲染引擎

Flutter使用谷歌自己的Skia渲染引擎，而Android系統自帶Skia引擎，iOS平臺上Flutter也會把Skia引擎打包到APP中，從而實現了高效渲染。而React Native通過橋接層訪問原生UI，操作頻繁就容易出性能問題。

綜合所述，Flutter 是性能最接近原生代碼 的一種開發框架，未來也會是構建谷歌Fuchsia應用的主要方式，前途不可限量，唯一的問題就是需要學習一門新的語言：Dart，而有Java或者C#語言基礎的程序員會比較容易學習。

Flutter真香，我用它寫了個桌面版JSON解析工具

Flutter支持穩定的桌面設備開發已經一段時間了，不得不說，Flutter多平臺支持的特性真的很香。我本人并沒有任何桌面開發的經驗，但仍然使用Flutter開發出了一個桌面版小程序，功能很簡單，就是對輸入的json做格式化處理和轉模型。

話不多說，先來看看實際效果。 項目源碼地址

開發環境如下：

Flutter : 2.8.1

Dart : 2.15.1

IDE : VSCode

JSON作為我們日常開發工作中經常要打交道的一種數據格式，它共有6種數據類型： null , num , string , object , array , bool 。我們勢必對它又愛又恨。愛他因為他作為數據處理的一種格式確實非常方便簡潔。但是在我們做Flutter開發中，又需要接觸到json解析時，就會感覺非常棘手，因為flutter沒有反射，導致json轉模型這塊需要手寫那繁雜的映射關系。就像下面這樣子。

數據量少還能接受，一旦量大，那么光手寫這個解析方法都能讓你懷疑人生。更何況手寫還有出錯的可能。好在官方有個工具**json_serializable**可以自動生成這塊轉換代碼，也解決了flutter界json轉模型的空缺。當然，業界也有專門解析json的網站，可以自動生成dart代碼，使用者在生成后復制進項目中即可，也是非常方便的。

本項目以json解析為切入點，和大家一起來看下flutter是如何開發桌面應用的。

要讓我們的flutter項目支持桌面設備。我們首先需要修改下flutter的設置。如下，讓我們的項目支持 windows 和 macos 系統。

接下來使用 flutter create 命令創建我們的模版工程。

創建完項目后，我們就可以 run 起來了。

先來看下整體界面，界面四塊，分別為功能模塊、文件選擇模塊、輸入模塊、輸出模塊。

我們在新建一個桌面應用時，默認的模版又一個Appbar，此時應用可以用鼠標拖拽移動，放大縮小，還可以縮到很小。但是，我們一旦去掉這個導航欄，那么窗口就不能用鼠標拖動了，并且我們往往不希望用戶將我們的窗口縮放的很小，這會導致頁面異常，一些重要信息都展示不全。因此這里需要借助第三方組件 bitsdojo_window 。通過 bitsdojo_window ，我們可以實現窗口的定制化，拖動，最小尺寸，最大尺寸，窗口邊框，窗口頂部放大、縮小、關閉的按鈕等。

通過 InkWell 組件，可以捕捉到手勢、鼠標、觸控筆的移動和停留位置

這個功能是鼠標移動后的UI交互界面。要在窗口上顯示一個提示框，可以使用 Overlay 。需要注意的是，由于在 Overlay 上的 text 的根結點不是 Material 風格的組件，因此會出現黃色的下劃線。因此一定要用 Material 包一下 text 。并且你必須給創建的 OverlayEntry 一個位置，否則它將全屏顯示。

讀取說表拖拽的文件一開始想嘗試使用 InkWell 組件，但是這個組件無法識別拖拽中的鼠標，并且也無法從中拿到文件信息。因此放棄。后來從文章《Flutter-2天寫個桌面端APP》中發現一個可讀取拖拽文件的組件 desktop_drop ，能滿足要求。

使用開源組件 file_picker ，選完圖片后的操作和拖拽選擇圖片后的操作一致。

Textfield 如果要顯示富文本，那么需要自定義 TextEditingController 。并重寫 buildTextSpan 方法。

在做導出功能時遇到下列報錯，保存提示為沒有權限訪問對應目錄下的文件。

通過Apple的開發文檔找到有關權限問題的說明。其中有個授權私鑰的key為 com.apple.security.files.downloads.read-write ，表示 對用戶的下載文件夾的讀/寫訪問權限 。那么，使用Xcode打開Flutter項目中的mac應用，修改工程目錄下的 DebugProfile.entitlements 文件，向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ，并將值設置為YES，保存后重啟Flutter項目。發現已經可以向下載目錄中讀寫文件了。

當然，這是正常操作。還有個騷操作就是關閉系統的沙盒機制。將 entitlements 文件的 App Sandbox 設置為NO。這樣我們就可以訪問任意路徑了。當然關閉應用的沙盒也就相當于關閉了應用的防護機制，因此這個選項慎用。

原文地址：

flutter中文本控件中的文本首行縮進怎么設置

”Flutter instability” 的中文術語是 “顫振穩定性“ （而不是”顫振不穩定性“）