如何製作 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)

• 連結：

（4）嘗試一些 Flutter 樣例

• 連結：

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

連結：

（6）試試看這些 Flutter 教程

• 連結：

（7）看看  Widgets 介紹文件

（8）看看這些 Flutter 技術影片
入門到進階實戰學習影片

最後

BATJ、位元組跳動面試專題，演算法專題，高階技術專題，混合開發專題，java面試專題，Android,Java小知識，到效能最佳化.執行緒.View.OpenCV.NDK等已經上傳到了的我的GitHub

大家點選我的GitHub地址: 點下star一起學習