Content：

Flutter框架概況

發展概述

Flutter是Google開發的一套全新的跨平臺、開源UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面。 Flutter可以與現有的程式碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。它也是構建未來的Google Fuchsia應用的主要方式及其預設開發套件。

Flutter元件採用現代響應式框架構建，這是從React中獲得的靈感，中心思想是用元件(widget)構建你的UI。元件描述了在給定其當前配置和狀態時他們顯示的樣子。當元件狀態改變，元件會重構它的描述(description)，Flutter會對比之前的描述，以確定底層渲染樹從當前狀態轉換到下一個狀態所需要的最小更改。

發展歷史

自從2017年5月釋出第一個版本以來，目前Flutter已經發布了近60個版本，並且在2018年5月釋出了第一個“Ready for Production Apps”的Beta 3版本，6月20日釋出了第一個“Release Preview”版本。

• Flutter的第一個版本被稱為“Sky”，執行在Android作業系統是。它是在2015年Dart開發者峰會 [3] 上亮相的，其目的是能夠以每秒120幀的速度持續渲染。
• Beta1版本於2018年2月27日在2018 世界移動大會公佈。
• Beta2版本2018年3月6日釋出。

框架特性

• Fast development(快速開發)
• Expressive and Flexible UI(富有表現力和靈活的UI)
• Native Performance(原生效能)
• Modern, reactive framework(現代的，響應式框架)
• Access native features and SDKs（訪問本地功能和SDK）
• Unified app development（統一標準的應用開發體驗）

Fast development(快速開發)

Flutter的熱過載可幫助您快速地進行測試、構建UI、新增功能並更快地修復錯誤。在iOS和Android模擬器或真機上可以在亞秒內過載，並且不會丟失狀態。

xpressive and Flexible UI(富有表現力和靈活的UI)

使用Flutter內建美麗的Material Design和Cupertino（iOS風格）widget、豐富的motion API、平滑而自然的滑動效果和平臺感知，為您的使用者帶來全新體驗。

Modern, reactive framework(現代的，響應式框架)

使用Flutter的現代、響應式框架，和一系列基礎widget，輕鬆構建您的使用者介面。使用功能強大且靈活的API（針對2D、動畫、手勢、效果等）解決艱難的UI挑戰。

class CounterState extends State<Counter> {
  int counter = 0;

  void increment() {
    // 告訴Flutter state已經改變, Flutter會呼叫build()，更新顯示
    setState(() {
      counter++;
    });
  }

  Widget build(BuildContext context) {
    // 當 setState 被呼叫時，這個方法都會重新執行.
    // Flutter 對此方法做了優化，使重新執行變的很快
    // 所以你可以重新構建任何需要更新的東西，而無需分別去修改各個widget
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $counter'),
      ],
    );
  }
}

Access native features and SDKs（訪問本地功能和SDK

通過平臺相關的API、第三方SDK和原生程式碼讓您的應用變得強大易用。 Flutter允許您複用現有的Java、Swift或ObjC程式碼，訪問iOS和Android上的原生系統功能和系統SDK。

Future<Null> getBatteryLevel() async {
  var batteryLevel = 'unknown';
  try {
    int result = await methodChannel.invokeMethod('getBatteryLevel');
    batteryLevel = 'Battery level: $result%';
  } on PlatformException {
    batteryLevel = 'Failed to get battery level.';
  }
  setState(() {
    _batteryLevel = batteryLevel;
  });
}

Unified app development（統一標準的應用開發體驗）

Flutter擁有豐富的工具和庫，可以幫助您輕鬆地同時在iOS和Android系統中實現您的想法和創意。 如果您沒有任何移動端開發體驗，Flutter是一種輕鬆快捷的方式來構建漂亮的移動應用程式。 如果您是一位經驗豐富的iOS或Android開發人員，則可以使用Flutter作為檢視(View)層， 並可以使用已經用Java / ObjC / Swift完成的部分（Flutter支援混合開發）。

1. 構建

   漂亮的使用者介面

   • 豐富的2D GPU加速API
   • 響應式框架
   • 動畫/運動API
   • Material元件和Cupertino widgets

   流暢的編碼體驗

   -亞秒級，有狀態的熱過載
   • IntelliJ: 程式碼重構、補全等
   • Dart語言和核心庫
   • 包管理器

   全功能的應用程式

   • 與移動作業系統API和SDK互動
   • Maven/Java
   • Cocoapods/ObjC/Swift

2. 優化

   測試

   • 單元測試
   • 整合測試
   • 裝置上測試

   除錯

   • IDE 偵錯程式
   • 基於Web的偵錯程式
   • async/await aware
   • Expression evaluator

   效能分析

   • 時間線（Timeline）
   • CPU和記憶體
   • 應用內效能圖示

3. 部署

   編譯

   • Native ARM 程式碼
   • Dead code elimination

   釋出

   • App Store
   • Play Store

瞭解詳細的Flutter技術總覽：

• 中文
• 英文

框架結構

Flutter的主要結構包括：

• Flutter engine
• Foundation library
• Design-specific widgets

快速入門

安裝Flutter在Mac OS上

使用映象

由於在國內訪問Flutter有時可能會受到限制，Flutter官方為中國開發者搭建了臨時映象，大家可以將如下環境變數加入到使用者環境變數中：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

獲取Flutter SDK

1. 去flutter官網下載其最新可用的安裝包，下載地址：Flutter SDK。當然在國內，大家懂得，如果想要正常獲取到安裝包列表或者下載安裝包，可能需要VPN的幫助，也可以去Flutter github專案去下載最新的安裝包，下載地址為：Flutter Github

2. 下載好壓縮包後解壓到你想安裝到的目錄下（切記是你想安裝到的目錄下，如果你要直接安裝到desktop，那當然也ok），如：

EchoZuo-work-MBP:/ EchoZuo$ cd users/echozuo/
EchoZuo-work-MBP:echozuo EchoZuo$  unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip

3. 新增flutter相關工具到path中，如：

export PATH=`pwd`/flutter/bin:$PATH

此程式碼只能暫時針對當前命令列視窗設定PATH環境變數，要想永久將Flutter新增到PATH中請參考下面 更新環境變數 部分。

執行 flutter doctor

執行以下命令來檢查是否還需要安裝其他依賴項或者是否有安裝錯誤產生：

flutter doctor

該命令檢查您的環境並在終端視窗中顯示報告。Dart SDK已經在捆綁在Flutter裡了，沒有必要單獨安裝Dart。 仔細檢查命令列輸出以獲取可能需要安裝的其他軟體或進一步需要執行的任務（以粗體以及錯誤符號x展示）

如：

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/Android/sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.io/setup/#android-setup for detailed instructions.

一般的錯誤會是xcode或Android Studio版本太低、或者沒有ANDROID_HOME環境變數等，請按照提示解決。Mac OS 的環境變數配置，可以對比修正下：

  export PATH=/Users/使用者名稱/Documents/flutter/flutter/bin:$PATH
  export ANDROID_HOME="/Users/使用者名稱/Documents/android_sdk" //android sdk目錄，替換為你自己的即可
  export PATH=${PATH}:${ANDROID_HOME}/tools
  export PATH=${PATH}:${ANDROID_HOME}/platform-tools
  export PUB_HOSTED_URL=https://pub.flutter-io.cn
  export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

切記設定好對應SDK的環境變數，否則無法安裝flutter成功。

第一次執行一個flutter命令（如flutter doctor）時，它會下載它自己的依賴項並自行編譯。以後再執行就會快得多。

以下各部分介紹如何執行這些任務並完成設定過程。你會看到在flutter doctor輸出中， 如果你選擇使用IDE，我們提供了，IntelliJ IDEA，Android Studio和VS Code的外掛。

一旦你安裝了任何缺失的依賴，再次執行flutter doctor命令來驗證你是否已經正確地設定了。

該flutter工具使用Google Analytics匿名報告功能使用情況統計資訊和基本崩潰報告。 這些資料用於幫助改進Flutter工具。Analytics不是一執行或在執行涉及flutter config的任何命令時就傳送， 因此您可以在傳送任何資料之前退出分析。要禁用報告，請執行flutter config --no-analytics並顯示當前設定，然後執行flutter config。

編譯器設定

使用 flutter 命令列工具，您可以使用任何編輯器來開發Flutter應用程式。輸入flutter help在提示符下檢視可用的工具。建議使用的外掛來獲得豐富的IDE體驗，支援編輯，執行和除錯Flutter應用程式。個人比較喜歡微軟的VS Code編譯器，介面也比較新穎美觀，相對於Android Studio，在Max OS上VS Code啟動更快速也不卡頓。

Visual Studio Code (VS Code) 安裝和相關配置

VS Code: 輕量級編輯器，支援Flutter執行和除錯.

安裝 VS Code

• VS Code, 安裝1.20.1或更高版本.

安裝Flutter外掛

1. 啟動 VS Code
2. 呼叫 View>Command Palette…
3. 輸入 ‘install’, 然後選擇 Extensions: Install Extension action
4. 在搜尋框輸入 flutter , 在搜尋結果列表中選擇 ‘Flutter’, 然後點選 Install
5. 選擇 ‘OK’ 重新啟動 VS Code

VS Code很多的相關設定都是聽過外掛或者命令列去處理，如果不習慣的話可以使用Android Studio或者IntelliJ。Android Studio的配置請參考配置編輯器。

通過Flutter Doctor驗證您的設定

1. 呼叫 View>Command Palette…
2. 輸入 ‘doctor’, 然後選擇 ‘Flutter: Run Flutter Doctor’ action
3. 檢視“OUTPUT”視窗中的輸出是否有問題。（這裡請仔細檢視控制檯輸出，如果沒有看到控制檯，可以通過快捷鍵shift+command+U調出控制檯）

開發平臺設定

macOS支援為iOS和Android開發Flutter應用程式。現在完成兩個平臺設定步驟中的至少一個，以便能夠構建並執行您的第一個Flutter應用程式

iOS 設定（如果你是一個iOS開發工作者，下述iOS的相關設定可以粗略帶過）

安裝Xcode

要為iOS開發Flutter應用程式，您需要Xcode 7.2或更高版本:

1. 安裝Xcode 7.2或更新版本
2. 配置Xcode命令列工具以使用新安裝的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 對於大多數情況，當您想要使用最新版本的Xcode時，這是正確的路徑。如果您需要使用不同的版本，請指定相應路徑。
3. 確保Xcode許可協議是通過開啟一次Xcode或通過命令sudo xcodebuild -license同意過了.

使用Xcode，您可以在iOS裝置或模擬器上執行Flutter應用程式

設定iOS模擬器

要準備在iOS模擬器上執行並測試您的Flutter應用，請按以下步驟操作：

1. 在Mac上，通過Spotlight或使用以下命令找到模擬器:

open -a Simulator

2. 通過檢查模擬器 硬體>裝置 選單中的設定，確保您的模擬器正在使用64位裝置（iPhone 5s或更高版本）.
3. 根據您的開發機器的螢幕大小，模擬的高清屏iOS裝置可能會使您的螢幕溢位。在模擬器的 Window> Scale 選單下設定裝置比例
4. 執行 flutter run啟動您的應用.

安裝到iOS裝置

要將您的Flutter應用安裝到iOS真機裝置，您需要一些額外的工具和一個Apple帳戶，您還需要在Xcode中進行設定。

1. 安裝 homebrew （如果已經安裝了brew,跳過此步驟）.
2. 開啟終端並執行這些命令來安裝用於將Flutter應用安裝到iOS裝置的工具

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

如果這些命令中的任何一個失敗並出現錯誤，請執行brew doctor並按照說明解決問題.

Android設定

安裝Android Studio

要為Android開發Flutter應用，您可以使用Mac，Windows或Linux（64位）機器.

Flutter需要安裝和配置Android Studio:

1. 啟動Android Studio，然後執行“Android Studio安裝嚮導”。這將安裝最新的Android SDK，Android SDK平臺工具和Android SDK構建工具，這是Flutter為Android開發時所必需的

設定您的Android裝置

要準備在Android裝置上執行並測試您的Flutter應用，您需要安裝Android 4.1（API level 16）或更高版本的Android裝置.

1. 在您的裝置上啟用 開發人員選項 和 USB除錯 。詳細說明可在Android文件中找到。
2. 使用USB將手機插入電腦。如果您的裝置出現提示，請授權您的計算機訪問您的裝置。
3. 在終端中，執行 flutter devices 命令以驗證Flutter識別您連線的Android裝置。
4. 執行啟動您的應用程式 flutter run。

預設情況下，Flutter使用的Android SDK版本是基於你的 adb 工具版本。 如果您想讓Flutter使用不同版本的Android SDK，則必須將該 ANDROID_HOME 環境變數設定為SDK安裝目錄。

設定安卓模擬器

要準備在Android模擬器上執行並測試您的Flutter應用，請按照以下步驟操作：

1. 在您的機器上啟用 VM acceleration .
2. 啟動 Android Studio>Tools>Android>AVD Manager 並選擇 Create Virtual Device.
3. 選擇一個裝置並選擇 Next。
4. 為要模擬的Android版本選擇一個或多個系統映像，然後選擇 Next. 建議使用 x86 或 x86_64 image .
5. 在 Emulated Performance下, 選擇 Hardware - GLES 2.0 以啟用 硬體加速.
6. 驗證AVD配置是否正確，然後選擇 Finish。
7. 在 Android Virtual Device Manager中, 點選工具欄的 Run。模擬器啟動並顯示所選作業系統版本或裝置的啟動畫面.
8. 執行 flutter run 啟動您的裝置. 連線的裝置名是 Android SDK built for ,其中 platform 是晶片系列, 如 x86.

初步體驗

先體驗一下Flutter App（使用VS Code）

建立新的應用

1. 啟動VS Code
2. 呼叫 View>Command Palette…（預設快捷鍵為shift+cmd+P），如果你的VS Code為中文版本，則為試圖>命令面板
3. 輸入 ‘flutter’, 然後選擇 ‘Flutter: New Project’ action
4. 輸入 Project 名稱, 然後按回車鍵
5. 指定放置專案的位置，然後按藍色的確定按鈕
6. 等待專案建立繼續，並顯示main.dart檔案

上述命令建立一個Flutter專案，專案名為myfirstflutterappnew（自己建立的專案名稱），其中包含一個使用Material 元件的簡單的演示應用程式。

在專案目錄中，您的應用程式的程式碼位於 lib/main.dart.

順便看一下建立完之後的專案檔案結構：

如果沒有問題，現在可以開始執行應用程式

1. 確保在VS Code的右下角選擇了目標裝置
2. 按 F5 鍵或呼叫Debug>Start Debugging
3. 等待應用程式啟動
4. 如果一切正常，在應用程式建成功後，您應該在您的裝置或模擬器上看到應用程式:

體驗熱過載

Flutter 可以通過 熱過載（hot reload） 實現快速的開發週期，熱過載就是無需重啟應用程式就能實時載入修改後的程式碼，並且不會丟失狀態（譯者語:如果是一個web開發者，那麼可以認為這和webpack的熱過載是一樣的）。簡單的對程式碼進行更改，然後告訴IDE或命令列工具你需要重新載入（點選reload按鈕），你就會在你的裝置或模擬器上看到更改。

1. 用你喜歡的編輯器開啟檔案lib/main.dart
2. 隨意更改程式碼中的字串，例如將'Flutter Demo Home Page'更改為'神奇的Flutter'
3. 不要按“停止”按鈕; 讓您的應用繼續執行.
4. 要檢視您的更改，請呼叫 Save (cmd-s / ctrl-s), 或者點選 熱過載按鈕 (綠色圓形箭頭按鈕).

你會立即在執行的應用程式中看到更新的字串

編寫第一個Flutter App

我們將製作一個無限滾動的list，這個 GIF 圖展示了最終實現的效果：

• Flutter 可以在 Android 和 iOS 系統裡自動適應不同的 UI 體系
• Flutter 工程/專案的基本結構
• 查詢和使用 packages 來擴充套件功能
• 使用熱過載加快開發週期
• 如何實現有狀態的 widget
• 如何建立一個無限的、延遲載入的列表

1.配置Flutter開發環境，如果沒有配置，請翻到“快速入門”模組對照進行配置

2.建立初始化工程

• 建立一個簡單的、基於模板的 Flutter 工程，按照這個指南中所描述的步驟，然後將專案命名為 startup_namer（而不是 myapp）

在這個示例中，你將主要編輯 Dart 程式碼所在的 lib/main.dart 檔案中

• lib/main.dart

刪除 lib/main.dart中的所有程式碼，然後替換為下面的程式碼，它將在螢幕的中心顯示"Hello World"。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}

• 觀察和分析

  • 本示例建立了一個具有 Material Design 風格的應用，Material 是一種移動端和網頁端通用的視覺設計語言，Flutter 提供了豐富的 Material 風格的 widgets。
  • 主函式（main）使用了 (=>) 符號，這是 Dart 中單行函式或方法的簡寫。
  • 該應用程式繼承了 StatelessWidget，這將會使應用本身也成為一個 widget。在 Flutter 中，大多數東西都是 widget，包括對齊 (alignment)、填充 (padding) 和佈局 (layout)。
  • Scaffold 是 Material library 中提供的一個 widget，它提供了預設的導航欄、標題和包含主螢幕 widget 樹的 body 屬性。widget 樹可以很複雜。
  • 一個 widget 的主要工作是提供一個 build() 方法來描述如何根據其他較低級別的 widgets 來顯示自己。
  • 本示例中的 body 的 widget 樹中包含了一個 Center widget，Center widget 又包含一個 Text 子 widget，Center widget 可以將其子 widget 樹對其到螢幕中心。

3.使用package

在這一步中，你將開始使用一個名為english_words 的開源軟體包，其中包含數千個最常用的英文單詞以及一些實用功能。

你可以 在 pub.dartlang.org 上找到 english_words 軟體包以及其他許多開源軟體包。

• pubspec 檔案管理 Flutter 應用程式的 assets（資源，如圖片、package等）。 在pubspec.yaml中，將 english_words（3.1.0或更高版本）新增到依賴項列表，如下面高亮顯示的行：

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0   # 新增了這一行

• 在Android Studio 的編輯器檢視中檢視 pubspec 時，單擊右上角的 Packages get，這會將依賴包安裝到您的專案。您可以在控制檯中看到以下內容：

flutter packages get
Running "flutter packages get" in startup_namer...
Process finished with exit code 0

• 在 lib/main.dart 中引入，如下所示：

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';  // 新增了這一行

在您輸入時，Android Studio會為您提供有關庫匯入的建議。然後它將呈現灰色的匯入字串，讓您知道匯入的庫截至目前尚未被使用。

接下來，我們使用 English words 包生成文字來替換字串"Hello World"：

• 我們需要進行如下更改：

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = new WordPair.random(); // 新增了這一行
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(    // 這裡把之前的 "const" 換成了 "new".
          //child: const Text('Hello World'),   // 我們不用這樣的方式生成文字了
          child: new Text(wordPair.asPascalCase),  // 這是新的文字生成方式
        ),
      ),
    );
  }
}

如果你沒有把 Center 前面的修飾詞從 const 改成 new 的話，系統就會報錯，因為這個時候它的子物件已經不是常量，那就不能再用 const 了，所以這裡 Center 和 Text 都需要使用 new 建立新的例項。

• 如果應用程式正在執行，請使用熱過載按鈕更新正在執行的應用程式。每次單擊熱過載或儲存專案時，都會在正在執行的應用程式中隨機選擇不同的單詞對。 這是因為單詞對是在 build 方法內部生成的。每次 MaterialApp 需要渲染時或者在 Flutter Inspector 中切換平臺時 build 都會執行.

4.新增一個 Stateful widget

Stateless widgets 是不可變的，這意味著它們的屬性不能改變——所有的值都是 final。

Stateful widgets 持有的狀態可能在 widget 生命週期中發生變化，實現一個 stateful widget 至少需要兩個類：1）一個 StatefulWidget 類；2）一個 State 類，StatefulWidget 類本身是不變的，但是 State 類在 widget 生命週期中始終存在。

在這一步，你將新增一個 stateful widget（有狀態的控制元件）—— RandomWords，它會建立自己的狀態類 —— RandomWordsState，然後你需要將 RandomWords 內嵌到已有的無狀態的 MyApp widget。

• 建立一個最簡的 state 類，這個類可以在任意地方建立而不一定非要在 MyApp 裡，我們的示例程式碼是放在 MyApp 類的最下面了：

class RandomWordsState extends State<RandomWords> {
  // TODO Add build method
}

注意一下 State<RandomWords>的宣告。這表明我們在使用專門用於 RandomWords 的 State 泛型類。應用的大部分邏輯和狀態都在這裡 —— 它會維護 RandomWords 控制元件的狀態。這個類會儲存程式碼生成的單詞對，這個單詞對列表會隨著使用者滑動而無限增長，另外還會儲存使用者喜愛的單詞對（第二部分），也即當用戶點選愛心圖示的時候會從喜愛的列表中新增或者移除當前單詞對。

RandomWordsState 繼承自 RandomWords，我們接下來會建立這個類。

• 新增有狀態的 RandomWords widget 到 main.dart，RandomWords widget 除了建立 State 類之外幾乎沒有其他任何東西：

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}

在新增狀態類後，IDE 會提示該類缺少 build方法。接下來，您將新增一個基本的 build 方法，該方法通過將生成單詞對的程式碼從 MyApp 移動到 RandomWordsState 來生成單詞對。

• 將 build方法新增到 RandomWordState 中，如下所示：

class RandomWordsState extends State<RandomWords> {
  @override                                  // 新增程式碼片段 - 開始 ... 
  Widget build(BuildContext context) {
    final WordPair wordPair = new WordPair.random();
    return new Text(wordPair.asPascalCase);
  }                                          // ... 新增的程式碼片段 - 結束
}

• 如下所示，刪除 MyApp 裡生成文字的程式碼：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final WordPair wordPair = new WordPair.random();  // 刪掉本行
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          //child: new Text(wordPair.asPascalCase), // 修改本行內容 
          child: new RandomWords(),                 // 修改成本行程式碼
        ),
      ),
    );
  }
}

• 熱過載（Hot reload）當前的工程，應用應該像之前一樣執行，每次熱過載或儲存應用程式時都會顯示一個單詞對。

5.建立一個無限滾動的 ListView

在這一步中，您將擴充套件（繼承）RandomWordsState 類，以生成並顯示單詞對列表。 當用戶滾動時，ListView 中顯示的列表將無限增長。 ListView 的 builder 工廠建構函式允許您按需建立一個懶載入的列表檢視。

• 向 RandomWordsState 類中新增一個 _suggestions 列表以儲存建議的單詞對，同時，新增一個 biggerFont 變數來增大字型大小 Also, add a _biggerFont variable for making the font size larger.

提示：在 Dart 語言中使用下劃線字首識別符號，會強制其變成私有。

class RandomWordsState extends State<RandomWords> {
  // 新增如下兩行
  final List<WordPair> _suggestions = <WordPair>[];
  final TextStyle _biggerFont = const TextStyle(fontSize: 18.0); 
  ...
}

接下來，我們將向 RandomWordsState類新增一個 _buildSuggestions()) 函式，此方法構建顯示建議單詞對的 ListView。

ListView 類提供了一個 builder 屬性，itemBuilder值是一個匿名回撥函式， 接受兩個引數- BuildContext和行迭代器 i。迭代器從 0 開始， 每呼叫一次該函式，i 就會自增 1，對於每個建議的單詞對都會執行一次。該模型允許建議的單詞對列表在使用者滾動時無限增長。

• 向 RandomWordsState類新增 _buildSuggestions()函式，內容如下：

Widget _buildSuggestions() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),

      // 對於每個建議的單詞對都會呼叫一次 itemBuilder，
      // 然後將單詞對新增到 ListTile 行中
      // 在偶數行，該函式會為單詞對新增一個 ListTile row.
      // 在奇數行，該行書湖新增一個分割線 widget，來分隔相鄰的詞對。
      // 注意，在小螢幕上，分割線看起來可能比較吃力。

      itemBuilder: (BuildContext _context, int i) {
        // 在每一列之前，新增一個1畫素高的分隔線widget
        if (i.isOdd) {
          return new Divider();
        }

        // 語法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整）
        // 比如 i 為：1, 2, 3, 4, 5 時，結果為 0, 1, 1, 2, 2，
        // 這可以計算出 ListView 中減去分隔線後的實際單詞對數量
        final int index = i ~/ 2;
        // 如果是建議列表中最後一個單詞對
        if (index >= _suggestions.length) {
        // ...接著再生成10個單詞對，然後新增到建議列表
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      }
    );
  }

對於每一個單詞對，_buildSuggestions函式都會呼叫一次 _buildRow。 這個函式在 ListTile 中顯示每個新詞對，這使您在下一步中可以生成更漂亮的顯示行，詳見本 codelab 的第二部分。

• 在 RandomWordsState中新增 _buildRow函式 :

  Widget _buildRow(WordPair pair) {
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }

• 更新 RandomWordsState的 build 方法以使用 _buildSuggestions()，而不是直接呼叫單詞生成庫，程式碼更改後如下：（使用 Scaffold 類實現基礎的 Material Design 佈局）

  @override
  Widget build(BuildContext context) {
    //final wordPair = new WordPair.random(); // 刪掉 ... 
    //return new Text(wordPair.asPascalCase); // ... 這兩行

    return new Scaffold (                   // 程式碼從這裡... 
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
      ),
      body: _buildSuggestions(),
    );                                      // ... 新增到這裡
  }

• 更新 MyApp 的 build 方法, changing the title, and changing the home to be a RandomWords widget.

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      home: new RandomWords(),
    );
  }

• 重新啟動你的專案工程應用，你應該看到一個單詞對列表。儘可能地向下滾動，你將繼續看到新的單詞對。

至此，我們的第一個無限滾得的Flutter頁面開發完成。後續會再進行拓展更多的功能。

更多細節

為什麼要使用Flutter？

Flutter是一款移動應用程式SDK，一份程式碼可以同時生成iOS和Android兩個高效能、高保真的應用程式。Flutter目標是使開發人員能夠交付在不同平臺上都感覺自然流暢的高效能應用程式。我們相容滾動行為、排版、圖示等方面的差異。

這是一個來自Gallery的演示應用程式， 您可以在安裝Flutter並設定好環境後執行Flutter示例應用程式。“Shrine”示例擁有高質量的滾動圖片、互動卡片、按鈕、下拉列表和購物車頁面。 要檢視這個和更多示例的程式碼，請訪問我們的GitHub。 無需移動開發經驗即可開始使用。應用程式是用Dart語言編寫的，如果您使用過Java或JavaScript之類的語言，則該應用程式看起來很熟悉。 使用面嚮物件語言的經驗絕對有幫助，但一些Flutter應用程式甚至是沒有程式設計經驗的人寫的！

Flutter的優勢

• 提高開發效率
  • 同一份程式碼開發iOS和Android
  • 用更少的程式碼做更多的事情
  • 輕鬆迭代
    • 在應用程式執行時更改程式碼並重新載入（通過熱過載）（熱過載特別方便快速執行看到效果，個人很喜歡）
    • 修復崩潰並繼續從應用程式停止的地方進行除錯
• 建立美觀，高度定製的使用者體驗
  • 受益於使用Flutter框架提供的豐富的Material Design和Cupertino（iOS風格）的widget
  • 實現定製、美觀、品牌驅動的設計，而不受原生控制元件的限制

核心原則

Flutter包括一個現代的響應式框架、一個2D渲染引擎、現成的widget和開發工具。這些元件可以幫助您快速地設計、構建、測試和除錯應用程式。

一切皆為widget

Widget是Flutter應用程式使用者介面的基本構建塊。每個Widget都是使用者介面一部分的不可變宣告。 與其他將檢視、控制器、佈局和其他屬性分離的框架不同，Flutter具有一致的統一物件模型：widget。

Widget可以被定義為:

• 一個結構元素（如按鈕或選單）
• 一個文字樣式元素（如字型或顏色方案）
• 佈局的一個方面（如填充）
• 等等…

其他

文章說明

• 本文僅供用於學習參考，請勿用於商業用途。如需轉載，請標明出處，謝謝合作。

• 本文系參考網路公開Flutter學習資料以及個人學習體會總結所得，部分內容為網路公開學習資料，如有侵權請連續作者刪除。

參考文章

作者資料

就職於甜橙金融（翼支付）資訊科技部，負責翼支付iOS客戶端開發。喜歡研究新的技術，喜歡Apple、喜歡數碼。大家可以一起探討一起學習。