MDC-101 Flutter：Material Design 元件基本概念

1. 簡介

什麼是 Material Design 和 Material Flutter 程式庫？

Material Design 是打造搶眼數位產品的系統。產品團隊只要遵循一致的原則和元件組合，將樣式、品牌宣傳、互動和動畫一貫化，就能實現最大的設計潛力。

Material Flutter 程式庫包含實作 Material Design 元件 (簡稱 MDC) 設計的 Flutter 小工具，可在不同應用程式和平台上提供一致的使用者體驗。隨著 Material Design 系統不斷演進，這些元件也會持續更新，確保像素導入作業一致，同時符合 Google 的前端開發標準。

在本程式碼研究室中，您將使用數個 Material Flutter 元件建構登入頁面。

建構項目

程式碼研究室之一，可引導您建構名為 Shrine 的電子商務應用程式，這個電子商務應用程式販售服飾和居家用品，並示範如何使用 Material Flutter 自訂元件，反映任何品牌或風格。

在本程式碼研究室中，您會建構 Shrine 的登入頁面，其中包含：

• 神殿的標誌圖片
• 應用程式名稱 (Shrine)
• 兩個文字欄位，一個用於輸入使用者名稱，另一個則用於密碼
• 兩個按鈕

Android	iOS

這是 4 個程式碼研究室中的第 1 個，可引導您為名為「 Shrine」的產品建構應用程式。建議您按照下列順序逐步完成所有程式碼研究室。相關程式碼研究室位於： MDC-102 Flutter：Material 結構和版面配置 MDC-103 Flutter：使用顏色、形狀、高度和類型加入 Material Design 主題設定 MDC-104 Flutter：Material 進階元件

本程式碼研究室中的 Material Flutter 元件和子系統

• 文字欄位
• 按鈕
• 墨水漣漪 (觸控事件的視覺回饋形式)

在本程式碼研究室中，您將使用 Material Flutter 提供的預設元件。如要瞭解如何自訂這些元素，請參閱 MDC-103：Material Design 主題設定，以及顏色、形狀、高度和類型。

針對 Flutter 開發經驗，您會給予什麼評價？

新手 中級 還算容易

2. 設定 Flutter 開發環境

您需要使用兩項軟體：Flutter SDK 和編輯器。

您可以使用下列任一裝置執行程式碼研究室：

• 將實體 Android 或 iOS 裝置接上電腦，並設為開發人員模式。
• iOS 模擬器 (需要安裝 Xcode 工具)。
• Android Emulator (需要在 Android Studio 中設定)。
• 瀏覽器 (必須使用 Chrome 進行偵錯)。
• 下載 Windows、Linux 或 macOS 桌面應用程式。您必須在要部署的平台上進行開發。因此，如果您想要開發 Windows 電腦版應用程式，就必須在 Windows 上進行開發，以便存取適當的建構鏈結。如要進一步瞭解作業系統的特定需求，請參閱 docs.flutter.dev/desktop。

3. 下載程式碼研究室的範例應用程式

下載範例專案

範例專案位於 material-components-flutter-codelabs-101-starter/mdc_100_series 目錄中。

...或是從 GitHub 複製檔案

如要從 GitHub 複製本程式碼研究室，請執行下列指令：

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs/mdc_100_series
git checkout 101-starter

如需進一步協助，請參閱：從 GitHub 複製存放區

合適的分支版本

Codelabs MDC-101 到 104 間連續建構。因此當您完成 101 的程式碼時，它就會成為 102 的範例程式碼！程式碼分成不同的分支版本，您可以使用下列指令列出所有分支版本：

git branch --list

如要查看完成的程式碼，請查看 102-starter_and_101-complete 分支。

開啟專案並執行應用程式

1. 在您選擇的編輯器中開啟專案。
2. 按照操作說明「執行應用程式」。

大功告成！Shrine 登入頁面的範例程式碼應該可以在您的裝置上運作。畫面上應該會顯示神社標誌和「Shrine」名稱正下方。

Android	iOS

我們來看看程式碼。

程式碼中的 TODO 包含數字 (101、102 等)，這些指的是您將實作變更的程式碼研究室編號。

「login.dart」的小工具

開啟 login.dart。其中應包含以下內容：

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // TODO: Add text editing controllers (101)
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            const SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                const SizedBox(height: 16.0),
                const Text('SHRINE'),
              ],
            ),
            const SizedBox(height: 120.0),
            // TODO: Remove filled: true values (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

請注意，其中包含 import 陳述式和兩個新類別：

• import 陳述式允許在這個檔案中使用 Material 程式庫。
• LoginPage 類別代表模擬工具中顯示的整個網頁。
• _LoginPageState 類別的 build() 函式可控管 UI 中所有小工具的建立方式。

如要進一步瞭解 Flutter 使用者介面的基本概念和小工具，請參閱 Flutter 小工具架構導覽，或是進行程式碼研究室：編寫第一個 Flutter 應用程式，第 1 部分。

4. 新增 TextField 小工具

首先，我們會在登入頁面新增兩個文字欄位，使用者會在該頁面輸入使用者名稱和密碼。我們會使用 TextField 小工具，顯示浮動標籤並啟用輕觸漣漪效果。

Material 的文字欄位已大幅升級，改善品牌彈性，並經大量的使用者體驗 (UX) 研究改善，使用與視覺設計更加出色。

如要進一步瞭解新的文字欄位，請參閱「Material 指南」文章。

本頁面主要以 ListView 的架構為基礎，該清單會將子項置於可捲動的欄中。在下方輸入文字欄位。

新增 TextField 小工具

在 const SizedBox(height: 120.0) 後方新增兩個文字欄位和空格字元。

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// spacer
const SizedBox(height: 120.0),
// [Password]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),

每個文字欄位都有一個 decoration: 欄位，用來擷取「InputDecoration」InputDecoration小工具。filled: 欄位代表文字欄位的背景會稍微填入背景，以便使用者辨識文字欄位中的輕觸或觸控目標區域。第二個文字欄位的 obscureText: true 值會自動將使用者輸入的內容替換成項目符號，這適用於密碼。

儲存專案 (使用按鍵動作：Command + s)，執行熱重新載入。

接著應該會顯示一個頁面，其中包含「使用者名稱」和「密碼」的兩個文字欄位！查看浮動標籤動畫：

Android	iOS

TextField 功能包括：

• TextField 小工具的外觀可輕易變更。請為裝飾欄位指定輸入 Decoration 值。
• 根據預設，文字欄位會顯示觸控回饋 (又稱為「漣漪」或「手寫」)。
• FormField 是類似的小工具，提供表單嵌入欄位的特殊功能。
• TextField 類別說明文件

5. 新增按鈕

接著，我們會在登入頁面新增兩個按鈕：「取消」和「下一步」我們會使用兩種按鈕小工具：TextButton 和 ElevatedButton。

選擇文字和進階按鈕

為何不只顯示兩個加速的按鈕？各個按鈕類型代表哪些動作比較重要。

版面配置應包含一個醒目的按鈕。這會讓其他按鈕較不重要。這個醒目的按鈕代表我們最希望使用者透過應用程式進行的動作。

我們不希望他們這麼做，就是取消登入。由於升起的按鈕會以凸起的外觀吸引目光，所以應將其用於更重要的動作。相較之下，左側的純文字按鈕看起來較不強調。

如要進一步瞭解按鈕階層，請參閱《質感設計指南》的按鈕一文。

新增溢位 Bar

在文字欄位之後，將 OverflowBar 新增至 ListView 的子項：

// TODO: Add button bar (101)
OverflowBar(
  alignment: MainAxisAlignment.end,
  // TODO: Add a beveled rectangular border to CANCEL (103)
  children: <Widget>[
    // TODO: Add buttons (101)
  ],
),

OverflowBar 會逐列排列子項。

新增按鈕

然後在 OverflowBar 的 children 清單中新增兩個按鈕：

    // TODO: Add buttons (101)
    TextButton(
      child: const Text('CANCEL'),
      onPressed: () {
        // TODO: Clear the text fields (101)
      },
    ),
    // TODO: Add an elevation to NEXT (103)
    // TODO: Add a beveled rectangular border to NEXT (103)
    ElevatedButton(
      child: const Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101) 
      },
    ),

為什麼 onPressed: 欄位 有空白區塊？

如果傳遞空值，按鈕就會停用。使用者不會透過輕觸的方式獲得任何意見回饋，我們也無法清楚瞭解使用者啟用的行為。如果使用空白區塊，系統就不會停用這些區塊。

如要進一步瞭解按鈕及其互動方式，請參閱「在應用程式中加入互動功能」。

儲存專案。在最後一個文字欄位下方，您應該會看到兩個按鈕：

Android	iOS

OverflowBar 會為您處理版面配置工作。讓按鈕水平放置，使按鈕並排顯示。

輕觸按鈕會啟動墨水波紋動畫，不會造成其他效果。讓我們在匿名 onPressed: 函式中新增功能，以便清除文字欄位並關閉下一個按鈕畫面：

新增 TextEditingController

目的是清除文字欄位的值，加入 TextEditingControllers 即可控制其文字。

在 _LoginPageState 類別的宣告下方，將控制器新增為 final 變數。

  // TODO: Add text editing controllers (101)
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

在第一個文字欄位的 controller: 欄位中，設定 _usernameController：

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  controller: _usernameController,

在第二個文字欄位的 controller: 欄位中，現在設定 _passwordController：

// TODO: Add TextField widgets (101)
// [Password]
TextField(
  controller: _passwordController,

編輯按壓後編輯

新增指令以清除 TextButton 的 onPressed: 函式中的每個控制器：

    // TODO: Clear the text fields (101)
    _usernameController.clear();
    _passwordController.clear();

儲存專案。現在，當您在文字欄位中輸入內容，按下 [取消] 就會再次清除每個欄位。

這份登入表單狀態良好！讓我們引導使用者前往 Shrine 應用程式的其餘部分。

流行

如要關閉這個檢視畫面，我們要從導覽堆疊中「彈出」 (或移除) 這個頁面 (也就是 Flutter 呼叫一個「路徑」) 的位置。

Navigator 會維護路徑堆疊，就像 iOS 的 UINavigationController。推送路徑會將路徑置於堆疊頂端。彈出堆疊會移除最近新增的路徑。在應用程式的 app.dart 中，呼叫 initialRoute: '/login', 會將登入畫面新增至導覽器。

如要瞭解路線和導航方式，請參閱「導航基本概念」。

在 ElevatedButton 的 onPressed: 函式中，從 Navigator 中彈出最新的路線：

        // TODO: Show the next page (101) 
        Navigator.pop(context);

最後，開啟 home.dart 並在 Scaffold 中將 resizeToAvoidBottomInset 設為 false：

    return Scaffold(
      // TODO: Add app bar (102)
      // TODO: Add a grid view (102)
      body: Center(
        child: Text('You did it!'),
      ),
      // TODO: Set resizeToAvoidBottomInset (101)
      resizeToAvoidBottomInset: false,
    );

這麼做可確保鍵盤的外觀不會改變首頁或小工具的大小。

大功告成！儲存專案。請直接點選「下一步」。

你們成功了！

Android	iOS

這個畫面是下一個程式碼研究室的起點，您將在 MDC-102 中處理。

關於按鈕：

• 除了 TextButton 和 ElevatedButton 外，還有 OutlinedButton、FloatingActionButton IconButton 等。

6. 恭喜！

我們新增了文字欄位和按鈕，而且很難考慮版面配置程式碼。Flutter 的 Material 元件具備許多樣式，幾乎可以輕鬆放置在畫面上。

完成的 MDC-101 應用程式可在 102-starter_and_101-complete 分支版本中找到。

您可以針對位於該分支版本的應用程式測試應用程式版本。

後續步驟

文字欄位和按鈕是 Material 系統中的兩個核心元件，但還有許多其他元件！此外，您也可以在 Material 元件小工具目錄中瀏覽其他類別。

或者，您也可以參閱「MDC-102：Material Design 結構和版面配置」，瞭解 MDC-102 中適用於 Flutter 的元件。

下一個程式碼研究室

我可以在合理的時間內，完成本程式碼研究室

非常同意 同意 普通 不同意 非常不同意

我想日後繼續使用 Material Design 元件

非常同意 同意 普通 不同意 非常不同意