• 原文地址：MDC-101 Flutter: Material Components (MDC) Basics (Flutter)
• 原文作者：codelabs.developers.google.com
• 譯文出自：掘金翻譯計劃
• 本文永久連結：github.com/xitu/gold-m…
• 譯者：DevMcryYu

MDC-101 Flutter：Material Components（MDC）基礎（Flutter）

• MDC-101 Flutter：Material Components（MDC）基礎（Flutter）
• MDC 102 Flutter：Material 結構和佈局
• MDC 103 Flutter：Material Theming 的顏色、形狀、高度和型別
• MDC 104 Flutter：Material 高階元件

1. 介紹

什麼是 Material Design 和 Material Components for Flutter？

Material Design 是一個用於構建醒目、美觀的數字產品的系統。通過在一套統一的原則和元件下將風格、品牌、互動和動作結合起來，產品團隊得以釋放其極大的設計潛能。

Material Components for Flutter（MDC-Flutter）將設計和工程與元件庫結合在一起，從而在各種應用和平臺之間建立統一的使用者體驗。隨著 Material Design 系統的發展，這些元件進行了更新以確保統一的畫素級的完美實現，並遵循 Google 的前端開發標準。MDC 同樣適用於 Android、iOS 和 Web。

在本教程中，你將使用多個 MDC Flutter 元件來構建一個登陸頁面。

你將構建一個

本教程是四個教程裡的第一個，它將指導你構建一款名為 Shrine —— 一個銷售服裝和家居用品的電子商務應用程式。它將演示如何使用 MDC-Flutter 自定義元件來體現任何品牌和風格。

在本教程中，你將為 Shrine 構建一個包含以下內容的登陸頁面：

• 一個 Shrine 的 logo
• 應用名稱（Shrine）
• 兩個文字框，一個用於輸入使用者名稱，另一個用來輸入密碼
• 兩個按鈕，一個用於“Cancel”，另一個用於“Next”

相關教程可以在以下位置找到：

• MDC 102 Flutter：Material 結構和佈局
• MDC 103 Flutter：Material Theming 的顏色、形狀、高度和型別
• MDC 104 Flutter：Material 高階元件

在 MDC-104 的最後，你將會構建一個如下所示的應用：

本教程中用到的 MDC 元件

• Text field
• Button
• Ripple

在這個教程，你將使用由 MDC-Flutter 提供的預設元件。你將在 MDC 103 Flutter：Material Theming 的顏色、形狀、高度和型別 中學習如何定製它們。

2. 安裝 Flutter 環境

前提條件

要開始使用 Flutter 開發移動應用程式，你需要：

• Flutter SDK
• 裝有 Flutter 外掛的 IntelliJ IDE，或者你喜歡的程式碼編輯器

Flutter 的 IDE 工具適用於 Android Studio，IntelliJ IDEA Community（免費）和 IntelliJ IDEA Ultimate。

要在 iOS 上構建和執行 Flutter 應用程式，你需要滿足以下要求：

• 執行 macOS 的計算機
• Xcode 9 或更新版本
• iOS 模擬器，或者 iOS 物理裝置

要在 Android 上構建和執行 Flutter 應用程式，你需要滿足以下要求：

• 執行 macOS，Windows 或者 Linux 的計算機
• Android Studio
• Android 模擬器（隨 Android Studio 一起提供）或 Android 物理裝置

獲取詳細的 Flutter 安裝資訊

重要提示： 如果連線到計算機的 Android 手機上出現“允許 USB 除錯”對話方塊，請啟用始終允許從此計算機選項，然後單擊確定。

在繼續本教程之前，請確保你的 SDK 處於正確的狀態。如果之前安裝過 Flutter，則使用 flutter upgrade 來確保 SDK 處於最新版本。

flutter upgrade
複製程式碼

執行 flutter upgrade 將自動執行 flutter doctor。如果這是首次安裝 Flutter 且不需升級，那麼請手動執行 flutter doctor。檢視顯示的所有檢查標記；這將會下載你需要的任何缺少的 SDK 檔案，並確保你的計算機配置無誤以進行 Flutter 的開發。

flutter doctor
複製程式碼

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
git checkout 101-starter
複製程式碼

更多幫助：從 GitHub 上克隆儲存庫

正確的分支

教程 MDC-101 到 104 連續構建。所以當你完成 101 的程式碼後，它將變成 102 教程的初始程式碼！程式碼被分成不同的分支，你可以使用以下命令將它們全部列出：

git branch --list

要檢視完整程式碼，請切換到 102-starter_and_101-complete 分支。

建立你的專案

以下步驟預設你使用的是 Android Studio (IntelliJ)。

建立專案

1. 在終端中，導航到 material-components-flutter-codelabs

2. 執行 flutter create mdc_100_series

開啟專案

1. 開啟 Android Studio。

2. 如果你看到歡迎頁面，單擊 開啟已有的 Android Studio 專案。

3. 導航到 material-components-flutter-codelabs/mdc_100_series 目錄並單擊開啟，這將開啟此專案。

在構建專案一次之前，你可以忽略在分析中見到的任何錯誤。

4. 在左側的專案皮膚中，刪除測試檔案 ../test/widget_test.dart

5. 如果出現提示，安裝所有平臺和外掛更新或 FlutterRunConfigurationType，然後重新啟動 Android Studio。

提示： 確保你已安裝 Flutter 和 Dart 外掛。

執行初始程式

以下步驟預設你在 Android 模擬器或裝置上進行測試。你也可以在 iOS 模擬器或裝置上進行，只要你安裝了 Xcode。

1. 選擇裝置或模擬器。

如果 Android 模擬器尚未執行，請選擇 Tools -> Android -> AVD Manager 來建立您裝置並啟動模擬器。 如果 AVD 已存在，你可以直接在 IntelliJ 的裝置選擇器中啟動模擬器，如下一步所示。

（對於 iOS 模擬器，如果它尚未執行，通過選擇 Flutter Device Selection -> Open iOS Simulator 來在你的開發裝置上啟動它。）

2. 啟動 Flutter 應用：

• 在你的編輯器視窗頂部尋找 Flutter Device Selection 下拉選單，然後選擇裝置（例如，iPhone SE / Android SDK built for ）。
• 點選執行圖示（

  

  ）。

如果你無法成功執行此應用程式，停下來解決你的開發環境問題。嘗試導航到 material-components-flutter-codelabs；如果你在終端中下載 .zip 檔案，導航到 material-components-flutter-codelabs-... 然後執行 flutter create mdc_100_series。

成功！Shrine 的初始登陸程式碼應該在你的模擬器中執行了。你可以看到 Shrine 的 logo 和它下面的名稱 "Shrine"。

如果你看到任何有關 pubspec 已被編輯的警告（提示獲取依賴項），不要管他 。當你按下執行按鈕時，它會為你執行 flutter packages get！

flutter packages get 會安裝你在 pubspec.yaml 檔案中列出的依賴項。 你可以編寫你自己的包以在 Pub 上釋出。本系列教程使用 shrine_images 自定義包來顯示你將在 MDC-102 看到的產品影像。

flutter packages get 呼叫底層 Dart pub 包管理器來安裝 Flutter 應用程式的所有依賴項。本系列教程的產品影像使用自定義 shrine_images 包。

有關更多包的資訊，參閱使用包。

讓我們來看看程式碼。

login.dart 中的小部件

開啟 login.dart。裡面應該包含：

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // TODO：新增文字編輯控制器（101）
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                SizedBox(height: 16.0),
                Text('SHRINE'),
              ],
            ),
            SizedBox(height: 120.0),
            // TODO：使用 AccentColorOverride 包裝 Username（103）
            // TODO：刪除填充：真值（103）
            // TODO：使用 AccentColorOverride 包裝 Password（103）
            // TODO：新增文字框小部件（101）
            // TODO：新增按鈕欄（101）
          ],
        ),
      ),
    );
  }
}

// TODO：新增 AccentColorOverride（103）
複製程式碼

請注意：它包含一個 import 語句和兩個新類：

• import 語句將 Material Components 引入此檔案
• LoginPage 類代表模擬器中顯示的整個頁面。
• _LoginPageState 類的 build() 函式控制如何建立 UI 中的所有小部件。

瞭解更多有關 Flutter UI 的基礎以及什麼是 widget 的內容，你可以參觀 Flutter Widget 框架 或者嘗試 編寫你的第一個 Flutter 應用程式，第一部分。

4. 新增文字框小部件

首先，我們將在登陸頁面新增兩個文字欄位，使用者可以在其中輸入使用者名稱和密碼。我們將使用文字框小部件，它顯示一個浮動標籤並啟用觸控的波紋效果。

Material 的文字框已得到極大增強，以提高品牌靈活性；在廣泛的使用者體驗（UX）研究的支援下進行改進，從而實現更好的視覺設計，提高可用性。

在 Material Guidelines 的 文章 中瞭解更多有關新 TextField 的資訊。

此頁面主要由 ListView 構成，它將其子項排列在一個可滾動的列中。讓我們將文字框放在底部。

新增文字框小部件

在 SizedBox(height: 120.0) 之後新增兩個新的文字框和一個間隔（spacer）。

// TODO：新增文字框小部件（101）
// [使用者名稱]
TextField(
  decoration: InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// 間隔（spacer）
SizedBox(height: 12.0),
// [密碼]
TextField(
  decoration: InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),
複製程式碼

每個文字框都有一個 decoration:，它帶有一個 InputDecoration 小部件。filled: true 意味著文字框的背景被淺色填充以幫助人們識別文字框的點選或觸控區域。第二個文字框的 obscureText: true值會自動將使用者的輸入替換為圓點形式，這適用於輸入密碼的地方。

儲存你的專案（使用快捷鍵：command / ctrl + s）執行熱過載。

你現在應該可以看到包含有使用者名稱和密碼文字框的頁面！檢視浮動標籤和墨水波紋動畫效果：

如果應用沒有更新，再次單擊“執行”按鈕，或單擊“停止”後再單擊“執行”。

文字框的功能包括：

• 可以輕鬆改變 TextField 小部件的外觀。在要修飾的區域，指定 InputDecoration 的值。
• MDC 文字框預設顯示觸控反饋（稱為 MDC 波紋或“墨水”）。
• FormField 是一個類似的小部件，具有在 Forms 中嵌入欄位的特殊功能。
• TextField 類文件

5. 新增按鈕

接下來，我們將在登陸頁面新增 “Cancel” 和 “Next” 兩個按鈕。我們將使用兩種 MDC 按鈕小部件：FlatButton（在 Material Guidelines 中稱為“Text Button”）和 RaisedButton（稱作“Contained Button”）。

在 Text Button 和 Contained Button 之間選擇

為什麼不簡單地顯示兩個 Contained Button 呢？ 這是因為每個按鈕的型別指示哪些操作比其他事情更重要。

一個佈局應該包含一個突出的按鈕。這清楚的表明其他按鈕的重要性較低。這個突出的按鈕代表了我們最希望使用者採取的操作，用以推進我們的應用執行。

我們最不喜歡使用者採取的操作是取消登陸。因為 Contained Button 以凸起的樣式吸引眼球，所以它應該用於更重要的操作。相比之下左側的純文字按鈕看起來不那麼顯眼。

在 Material Guidelines 的 按鈕 一文中瞭解更多有關按鈕層級的資訊。

新增按鈕欄

在文字框下面，新增 ButtonBar 作為 ListView 的子項：

// TODO：新增按鈕欄（101）
ButtonBar(
  // TODO：給 CANCEL 新增斜面矩形邊框（103）
  children: <Widget>[
    // TODO：新增按鈕（101）
  ],
),
複製程式碼

ButtonBar 將其子項全部橫向排列

新增按鈕

然後在 ButtonBar 的 children 列表中新增兩個按鈕：

// TODO：新增按鈕（101）
FlatButton(
    child: Text('CANCEL'),
    onPressed: () {
    // TODO：清除文字框（101）
    },
),
// TODO：給 NEXT 按鈕新增高度（103）
// TODO：給 NEXT 新增斜面矩形邊框（103）
RaisedButton(
    child: Text('NEXT'),
    onPressed: () {
// TODO：顯示下一頁（101）
    },
),
複製程式碼

為什麼我們的 onPressed：欄位為空塊？

如果我們傳遞 null，或者沒有包含該欄位（預設為 null），則按鈕將被禁用。沒有關於觸控的反饋，我們無法很好的瞭解他們的啟用行為。使用空塊可以防止他們被禁用。

有關按鈕及其互動的更多資訊，請參閱為你的應用程式新增互動。

儲存你的專案，在最下方的文字框下，你應該看到兩個按鈕：

ButtonBar 為你處理佈局工作。它根據當前 ButtonTheme 中的填充，水平地定位按鈕，使他們彼此相鄰。（你將在 MDC-103 中瞭解更多相關資訊。）

觸控按鈕會啟動墨水波紋動畫，而不會導致其他任何事情發生。讓我們在匿名函式 onPressed: 中新增功能來讓取消按鈕能夠清空文字框，用下一個按鈕來關閉螢幕：

新增 TextEditingControllers

為了能夠清除文字框的值，我們將新增 TextEditingControllers 來控制他們的文字。

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

// TODO：新增文字編輯控制器（101）
final _usernameController = TextEditingController();
final _passwordController = TextEditingController();
複製程式碼

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

// [使用者名稱]
TextField(
  controller: _usernameController,
複製程式碼

在第二個文字框的 controller: 中，設定 _passwordController：

// [密碼]
TextField(
  controller: _passwordController,
複製程式碼

編輯 onPressed

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

// TODO：清除文字框（101）
_usernameController.clear();
_passwordController.clear();
複製程式碼

儲存你的專案。現在當你在文字框中鍵入內容後，按下取消按鈕將會清空每個文字框。

此登陸頁面狀態良好！讓我們將使用者帶入 Shrine 應用的其餘部分。

彈出

要取消此檢視，我們希望從導航棧中彈出（或者刪除）此頁面（在 Flutter 中稱為路由）。

Navigator 負責維護一個路由棧，就像 iOS 上的 UINavigationController 一樣。入棧 一個路由會將其放置在堆疊的頂部。出棧 會刪除最近新增的路由。在我們程式的 app.dart 中，呼叫 initialRoute: '/login', 將登陸螢幕新增到 Navigator ，放到進入到 home: 的內容之上。

在導航基礎中詳細瞭解路由和導航。

在 RaisedButton 的 onPressed: 函式中，從 Navigator 中彈出最近的路由：

// TODO：顯示下一頁（101）
            RaisedButton(
                child: Text('NEXT'),
                onPressed: () {
                Navigator.pop(context);
                },
            ),
複製程式碼

就是這樣！儲存專案。然後單擊“下一步”。

你做到了！

這個頁面是我們下一個教程的起點，你可以在 MDC-102 中繼續使用它。

有關按鈕：

• 除了 FlatButton 和 RaisedButton 以外，還有 OutlineButton、FloatingActionButton、IconButton 等。
• 在 MDC Widgets 目錄中瀏覽按鈕及其文件。

6. 全部完成

我們新增了文字框和按鈕並且幾乎不必考慮佈局程式碼。Material Components for Flutter 具有很多風格，幾乎可以毫不費力地完成佈局。

已完成的 MDC-101 應用可在 102-starter_and_101-complete 分支中找到。

你可以根據該分支中的應用測試你自己的應用版本。

下一步

文字框和按鈕是 Material 系統中的兩個核心元件，但是還有更多！你可以在 Flutter 的 Material Components 庫中瀏覽其餘小部件。

另外，轉到 MDC-102 Flutter：Material 結構和佈局瞭解 MDC-102 所涵蓋的 Flutter 元件。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。