如何製做 Flutter 應用？只需四步，輕鬆上手！

Flutter徹底免費、開源,在全世界，Flutter正在被愈來愈多的開發者和組織使用。

不要猶豫，一塊兒來走進Flutter的世界吧

1. Flutter 是什麼？

Flutter 是 Google 開源的 UI 工具包，幫助開發者經過一套代碼庫高效構建多平臺精美應用，支持移動、Web ([early access][])、桌面和嵌入式平臺。

Flutter 旨在幫助開發者創做媲美原生的高性能應用，並聽從了各個平臺不一樣的滾動行爲、排版佈局、圖標樣式等。這是一個名爲 Gallery 的示例應用， Gallery 是一個在安裝完 Flutter 並配置好環境後能夠當即運行的 Flutter 示例應用集合。

Shrine 有高質量的滾動圖片、交互式卡片、按鈕、下拉列表以及一個購物車頁面。開始開發以前無需移動開發經驗。應用使用 Dart 開發，若是你曾使用過 Java 或者 JavaScript 語言，那麼 Dart 看上去會很熟悉。

面向對象編程的經驗對開發毫無疑問會有幫助，但即使不是程序員也能夠製做 Flutter 應用！

2. 爲何使用 Flutter？

Flutter 的優點是什麼？它可以幫你：

高效率

• 在應用運行時嘗試修改代碼並重載（經過熱重載）
• 修復崩潰並從應用中止的地方開始繼續調試
• 利用單一代碼庫開發 iOS 與 Android 應用
• 即使在單一操做系統上，也能夠經過使用現代、富有表現力的語言以及聲明式方法，寫更少代碼作更多事
• 原型與輕鬆迭代

生成美觀、高度定製化的用戶體驗

• 受益於用 Flutter 框架構建的豐富的 Material Design 以及 Cupertino （iOS 風格） widget
• 實現定製、美觀、品牌驅動的設計，不受 OEM widget 集合的限制

3. 核心原則

Flutter 包含一個現代響應式框架，一個 2D 渲染引擎，現成的 widget 以及開發工具。這些組件協同工做以幫助你設計、構建、測試和調試應用。全部這一切都圍繞幾個核心原則進行組織。

3.1 一切皆 Widget**

Widget 是 Flutter 應用用戶界面的基本構建單元，每一個 widget 都與最終的用戶界面的展現緊密相關。不一樣於其餘框架和平臺 —— 將視圖 (views)、視圖控制器 (view controllers)、佈局 (layouts) 等其餘屬性分開， Flutter 擁有統一的對象模型：widget。一個 widget 能夠定義：

• 一個結構元素（好比一個按鈕或者菜單）
• 一個風格元素（好比一個字體或者配色方案）
• 佈局的一個方面（好比 padding）
• 等等……

Widget 經過組合造成一個層次結構，每一個 widget 嵌套其中，從其父節點繼承屬性。Flutter 中沒有單獨的「application」對象，與之相對應的功能由 root widgets 承擔。

你能夠經過告訴框架將層次結構中的一個 widget 替換爲另外一個來響應事件，如用戶交互。框架將會對比新舊 widget 並及時更新用戶界面。

3.1.1 組合大於繼承

Widgets 自己每每是由許多小的、具備單一用途的 widget 組成，它們組合在一塊兒能夠產生強大的效果。好比，Container 是一個經常使用的 widget，由負責佈局、繪製、定位和尺寸的幾個 widget 組成。

具體來講，Container 是由 LimitedBox、ConstrainedBox、Align、Padding、 DecoratedBox 和 Transform widgets 組成的。

你能夠將這些與其它小而簡單的 widgets 用新穎的方式組合，而不是子類化 Container 以生成自定義效果。類層次結構是淺而廣的，以支持儘量多的組合。

你也能夠經過組合其它 widgets 以達到控制一個 widget 的佈局。例如，爲了居中一個 widget，你能夠把它包裹在一個 Center widget 中。還有用於設置間距、對齊、行、列以及網格的 widgets，這些佈局 widgets 自己並無視覺表現。

反之，他們惟一的目的是在某些方面上控制另外一個 widget 的佈局。要了解一個 widget 以某種方式呈現的緣由，查看其鄰近 widgets 一般頗有幫助。

3.1.2 層次蛋糕很是美味

Flutter 框架由一系列層結構組成，每一層都創建在前一層之上。

框架上層會比下層使用的更頻繁。

這樣作的目的是爲了幫助你用更少的代碼完成更多工做。
例如，經過在 widgets 層組合基礎 widgets 來構建 Material 層，而 widgets 層自己則是經過對來自 Rendering 層的低層次對象組合而來。這些層次爲構建應用程序提供了許多選項。選擇一種自定義方法來釋放框架的所有表現力，或使用 widgets 層中的構建塊，或混合搭配。

你能夠組合 Flutter 提供的現成 widgets 或使用 Flutter 團隊在構建框架時所使用的相同工具和技術來構建你的自定義 widgets。沒有任何內容能夠逃離你的視線，所以能夠在生產力上從高級別、統一的 widget 概念中獲益，且不會犧牲你想深刻更底層時的能力。

3.2 構建 widget

能夠經過完善 build() 函數來定義一個 widget 擁有的特性，該函數返回一個 widget 樹（或者層次結構）。該樹經過更具體的方式來表示用戶界面上的 widget 部分。

例如，一個 toolbar widget 可能會有一個返回一些 水平佈局 文本 和 各類 按鈕 的構建函數。

框架會遞歸地去構建這些 widget 直到達到最底層 徹底具象的 widgets，而後將它們拼接成一棵樹。一個 widget 的構建函數應該沒有反作用。

不論什麼時候調用，widget 總應該返回一顆新的 widgets 樹，不論其以前返回了什麼。框架會將先前構建與當前構建仔細進行比較，並肯定須要對用戶界面作哪些修改。

這種自動比較很是有效，可實現高性能的交互式應用。構建函數在設計上經過專一聲明 widget 的構成，而不是處理更新用戶界面狀態的複雜性，來達到簡化代碼的目的。

3.3 處理用戶交互

若是一個 widget 的特性須要根據用戶交互或其餘因素改變，那麼這個 widget 是有狀態的。例如，若是一個 widget 包含一個隨用戶點擊按鈕而遞增的計數器，則計數器的值即是 widget 的狀態。

當該值更改時，則須要從新構建 widget 以更新 UI。這些 widget 繼承自 StatefulWidget（而不是 StatelessWidget）並將它們可變的狀態存儲在 State 的一個子類中。

不論什麼時候你操做一個 State 對象（例如，遞增計數器），你必須調用 setState() 方法來通知框架經過從新調用 State 的構建函數，以此達到更新用戶界面的目的。

有關狀態管理的示例，能夠查看隨着任何一個新 Flutter 項目生成的 MyApp 模版。將狀態與 widgets 對象分開可讓其餘 widgets 以相同的方式處理無狀態和有狀態的 widget，而不用擔憂丟失狀態。不一樣於經過維持一個子節點來保留狀態，父節點能夠自由地建立子節點實例，而不會丟失子節點的持久狀態。框架會在適當的時候作完查找和重用現有狀態對象的全部工做。

4. 試試！

既然你已熟悉 Flutter 框架的基本結構和原理，及如何構建應用並使其具備交互性，那麼你已準備好開始開發與迭代了。

（1）試試看 Flutter 佈局基礎教程 (無須下載 Flutter 或 Dart)

（2）安裝 Flutter SDK （ Linux、Windows 和 macOS ）

（3）查看 Flutter 使用教程(cookbook)

• 連接：https://flutter.cn/docs/cookbook

（4）嘗試一些 Flutter 樣例

• 連接：https://github.com/flutter/samples/blob/master/INDEX.md

（5）試試看上手一些 Flutter codelabs

連接：https://flutter.cn/docs/codelabs

（6）試試看這些 Flutter 教程

• 連接：https://flutter.cn/docs/reference/tutorials

（7）看看 Widgets 介紹文檔

（8）看看這些 Flutter 技術視頻

**入門到進階實戰學習視頻，關注我，私信【flutter】領取**

最後

BATJ、字節跳動面試專題，算法專題，高端技術專題，混合開發專題，java面試專題，Android,Java小知識，到性能優化.線程.View.OpenCV.NDK等已經上傳到了的個人GitHub

你們點擊個人GitHub地址:https://github.com/Meng997998/AndroidJX點下star一塊兒學習