Flutter：手拉手帶你極速構建漂亮的跨平臺(iOS/Android)移動應用 ✿ 初識

最近，學習了一些 Flutter 相關的知識，作了以下的小移動應用，固然是一套代碼便可在 iOS 平臺運行,也能夠在 Android 運行。

文章詳情可查閱個人博客：h.lishaoy.net ，歡迎你們訪問。

下面我將手拉手帶您快速構建出漂亮的移動應用界面（以下👇小視頻）

初識 Flutter

Flutter 是谷歌的移動UI框架，能夠快速在iOS和Android上構建高質量的原生用戶界面。

Google 推出 Flutter 移動應用框架已經有三年，直到今年的 Google I/O 開發大會才正式介紹 Flutter 且發佈 Beta 版本, Flutter Google I/O 視頻 這個是 Flutter 在油管（YouTube）的 Google I/O 開發者大會的視頻，請自行觀看。

再來看看更加生動的視頻介紹，加速您的初識 Flutter

Google 的廣告應用 Adwords，阿里的閒魚 App 都是基於 Flutter 框架開發的。

如下是阿里巴巴用 Flutter 打造了5000多萬用戶閒魚 App (Flutter Developer Story) 的故事視頻

Flutter 做爲谷歌推出的跨平臺開發框架，一經推出便吸引了很多注意,在 GitHub 上的 Star 數已超過 4W+ 。

CMTC全球大前端技術大會 ㄧ Flutter視頻 這是 Google中國在 bilibili 上發佈的視頻，請自行觀看。

Flutter 特性

經過以上的視頻，對於 Flutter 已有所認識，下面再來看看 Flutter 的如下特性

熱重載

當你修改了代碼 ⌘ - S ，可馬上看到效果，並且能夠保持界面狀態不變（如文本框輸入的信息不會改變），如圖：

Hot reload

設計

Flutter 自帶 Google 推行的設計系統：Material Design ，它提供了豐富的 Material Design 風格的組件（好比：按鈕、輸入框、對話框、導航欄、邊欄等），並且也提供了豐富的 iOS（Cupertino） 風格的組件，利用這些風格的組件可以快速的構建應用，如圖

Material Design

widget

widget 是 Flutter 應用程序基本構建塊, Flutter 既不使用 WebView，也不使用操做系統的原生控件，相反 Flutter 使用本身的高性能渲染引擎來繪製widget ， Flutter 的中心思想是用 widget 構建你的 UI（一切皆爲 widget） ，如圖是官網給出的框架圖：

widget

在這個架構裏，你能夠實現 Flutter 提供的全部現成的 widget ，也能夠建立本身定製的 widget ，每一個 widget 都是公開的，你能夠從高層次且統一的 widget 中得到開發效率優點，這個設計的目標是爲了用更少的代碼作更多的事情。

語言

Flutter 使用 C、C ++、Dart 和 Skia（2D渲染引擎）技術構建，如上圖，底層（engine）是用 C ++ ，框架是用 Dart ，固然咱們開發使用的也是 Dart。

Dart 是 Google 發佈的一種高效、簡潔、擁有完整類型系統的 結構化的Web編程 語言， Flutter 官方給出爲何選擇 Dart 做爲開發語言的緣由，以下

• 開發人員的效率
• 面向對象
• 可預測，高性能
• 快速內存分配

對於開發者（語言使用者）來講，沒必要太擔憂，Dart 和 Java 、 JavaScript 比較相似，有一些程序語言基礎，即可拿來即用（不清楚的看看語法、關鍵字、類型便可）。

如今想必您對 Flutter 已經有了必定的認識，在以後的篇幅了會手拉手帶你極速構如文頭小視頻的小應用。