[譯] MDC-103 Flutter: Material Theming 的顏色、形狀、高度和類型（Flutter）

時間 2019-11-17

標籤 mdc flutter material theming 顏色形狀高度類型简体版

原文原文鏈接

原文地址：MDC-103 Flutter: Material Theming with Color, Shape, Elevation, and Type (Flutter)

原文做者：codelabs.developers.google.com

譯文出自：掘金翻譯計劃

本文永久連接：github.com/xitu/gold-m…

譯者：DevMcryYu

校對者：PrinceChou, Fengziyin1234

MDC-103 Flutter: Material Theming 的顏色、形狀、高度和類型（Flutter）

1. 介紹

Material 組件（MDC）幫助開發者實現 Material Design。MDC 由谷歌團隊的工程師和 UX 設計師創造，爲 Android、iOS、Web 和 Flutter 提供不少美觀實用的 UI 組件。

material.io/develophtml

如今可使用 MDC 來爲你的應用程序定製遠比之前獨特的樣式。Material Design 近期的更新使得設計師和開發者能夠更靈活地表達他們的產品理念。前端

在教程 MDC-101 和 MDC-102 中，你使用 Material 組件（MDC）爲一個名爲 Shrine 的銷售服裝和家居用品的電子商務應用程序構建基礎。這個應用的用戶使用流程包括一個開始的登錄頁面，而後導航用戶前往展現商品的主屏幕。android

你將構建一個

在本教程中，你將會使用如下屬性來定製 Shrine 應用：ios

顏色（Color）
排版（Typography）
高度（Elevation）
形狀（Shape）
佈局（Layout）

這是四篇教程中的第三篇，來引導你構建 Shrine 應用。git

其他教程可在這裏找到：github

到 MDC-104 的最後，你將會構建一個像這樣的應用：後端

本教程中使用到的 MDC-Flutter 組件和子系統

主題（Theme）
排版（Typography）
高度（Elevation）
圖片列表（Image list）

你將須要

Flutter SDK
安裝好 Flutter 插件的 Android Studio，或者你喜歡的代碼編輯器
示例代碼

要在 iOS 上構建和運行 Flutter 應用程序，你須要知足如下要求：

運行 macOS 的計算機
Xcode 9 或更新版本
iOS 模擬器，或者 iOS 物理設備

要在 Android 上構建和運行 Flutter 應用程序，你須要知足如下要求：

運行 macOS、Windows 或 Linux 的計算機
Android Studio
Android 模擬器（隨 Android Studio 一塊兒提供）或 Android 物理設備

2. 安裝 Flutter 環境

前提條件

要開始使用 Flutter 開發移動應用程序，你須要：bash

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 安裝信息app

重要提示： 若是鏈接到計算機的 Android 手機上出現「容許 USB 調試」對話框，請啓用始終容許今後計算機選項，而後單擊肯定。

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

flutter upgrade
複製代碼

運行 flutter upgrade 將自動運行 flutter doctor。若是這是首次安裝 Flutter 且不需升級，那麼請手動運行 flutter doctor。查看顯示的全部 ✓ 標記；這將會下載你須要的任何缺乏的 SDK 文件，並確保你的計算機配置無誤以進行 Flutter 的開發。

flutter doctor
複製代碼

3. 下載教程初始應用程序

從 MDC-102 繼續？

若是你完成了 MDC-102，那麼本教程所需代碼應該已經準備就緒，跳轉到調整顏色一步。

從頭開始？

下載初始應用程序

Download starter app

此入門程序位於 material-components-flutter-codelabs-103-starter_and_102-complete/mdc_100_series 目錄中。

...或者從 GitHub 克隆它

要從 GitHub 克隆此項目，請運行如下命令：

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs
git checkout 103-starter_and_102-complete
複製代碼

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

正確的分支

教程 MDC-101 到 104 連續構建。因此當你完成 103 的代碼後，它將變成 104 教程的初始代碼！代碼被分紅不一樣的分支，你可使用如下命令將它們所有列出：

git branch --list

要查看完整代碼，請切換到 104-starter_and_103-complete 分支。

創建你的項目

如下步驟默認你使用的是 Android Studio (IntelliJ)。

建立項目

在終端中，導航到 material-components-flutter-codelabs
運行 flutter create mdc_100_series

打開項目

打開 Android Studio。
若是你看到歡迎頁面，單擊打開已有的 Android Studio 項目。

導航到 material-components-flutter-codelabs/mdc_100_series 目錄並單擊打開，這將打開此項目。

在構建項目一次以前，你能夠忽略在分析中見到的任何錯誤。

在左側的項目面板中，刪除測試文件 ../test/widget_test.dart

若是出現提示，安裝全部平臺和插件更新或 FlutterRunConfigurationType，而後從新啓動 Android Studio。

提示：確保你已安裝 Flutter 和 Dart 插件。

運行初始程序

如下步驟默認你在 Android 模擬器或設備上進行測試。你也能夠在 iOS 模擬器或設備上進行，只要你安裝了 Xcode。

選擇設備或模擬器

若是 Android 模擬器還沒有運行，請選擇 Tools -> Android -> AVD Manager 來建立您設備並啓動模擬器。若是 AVD 已存在，你能夠直接在 IntelliJ 的設備選擇器中啓動模擬器，以下一步所示。

（對於 iOS 模擬器，若是它還沒有運行，經過選擇 Flutter Device Selection -> Open iOS Simulator 來在你的開發設備上啓動它。）

啓動 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"。

若是應用沒有更新，再次單擊「Play」按鈕，或者點擊「Play」後的「Stop」。

點擊「Next」來查看上一教程中的主屏幕。

4. 調整顏色（Color）

一個表明着 Shrine 品牌的配色方案已經建立好了。設計師但願你在 Shrine 應用中實現這個配色方案。

首先，讓咱們在項目裏導入這些顏色。

建立 `colors.dart`

在 lib 目錄下新建一個名爲 colors.dart 的 dart 文件。導入 Material 組件並添加 Color 常量：

import 'package:flutter/material.dart';

const kShrinePink50 = const Color(0xFFFEEAE6);
const kShrinePink100 = const Color(0xFFFEDBD0);
const kShrinePink300 = const Color(0xFFFBB8AC);
const kShrinePink400 = const Color(0xFFEAA4A4);

const kShrineBrown900 = const Color(0xFF442B2D);

const kShrineErrorRed = const Color(0xFFC5032B);

const kShrineSurfaceWhite = const Color(0xFFFFFBFA);
const kShrineBackgroundWhite = Colors.white;
複製代碼

自定義調色板（Color palette）

此顏色主題由設計師自選顏色進行建立（以下圖所示）。它包含 Shrine 的品牌色並應用於 Material 主題編輯器，由此衍生出的完整的調色板。（這些顏色並不是來自 2014 Material color palette。）

Material 主題編輯器使用以數字表示的色度（shade）對顏色進行分類，每種顏色都有 50、100、200、... 一直到 900 等幾個色度。Shrine 僅僅使用 50、100 和 300 色度的粉色調以及 900 色度的棕色調。

譯者注：色度：色彩深淺、明暗的程度。

每一個部件的顏色參數都對應此模板內的顏色。例如，文本框在接收輸入時的修飾顏色應該是主題的 Primary color。若是該顏色不合適（易於與背景區分），請改用 PrimaryVariant。

Colors 類

kShrineBackgroundWhite 的值來自於 Colors 類。這個類包含常見的顏色值，例如白色。它還包含 2014 color palette 做爲 MaterialColor 類。

MaterialColor 類

在 'material/colors.dart' 中找到的 MaterialColor 類（子類是 ColorSwatch）是一組包含 14 或更少種由原色變換成的顏色，好比 14 種不一樣色度的紅色、綠色、淺綠或石灰色。這就相似於你在油漆店裏見到的漸變色色卡。

這些顏色是在 2014 Material 指南中提出的，而且在當前指南（顏色系統（Color System））以及 MDC-Flutter 中仍然可用。要在代碼裏訪問它們，只需調用基礎色後接色度（一般爲 100 的倍數）便可。例如，Pink 400 可經過 Colors.pink[400] 檢索到。

你徹底能夠將這些調色盤運用到你的設計和代碼上。若是已經有屬於品牌本身的配色，也可使用調色板生成工具或者Material 主題編輯器來生成本身的配色。

如今咱們有想用的顏色了。咱們能夠將它應用到 UI 上。咱們將經過設置應用於 MaterialApp 實例頂部層次結構的 ThemeData 部件來實現。

定製 ThemeData.light()

Flutter 包含一些內置主題。light 主題就是其中之一。與其從零開始製做一個 ThemeData 部件，咱們不如拷貝 light 主題而後修改其中的一部分屬性來爲咱們的應用進行定製。

拷貝 ThemeData 實例

咱們在默認的 light ThemeData 中調用 copyWith()，而後傳入一些自定義屬性值（copyWith() 在 Flutter 中是一個經常使用方法，你會在不少類和部件中看到它）。這個命令返回與調用它的實例匹配的部件實例，可是替換了一些指定的值。

爲何不實例化一個 ThemeData 而後設它的屬性呢？固然能夠！若是咱們繼續構建咱們的程序,這將頗有意義。因爲 ThemeData 擁有大量的屬性，爲了節省時間，咱們的教程將從修改一個有吸引力的主題的可見值入手。當咱們稍後嘗試使用替代主題時，咱們將從 MDC-Flutter 附帶的 ThemeData 開始。

在 Flutter 文檔中瞭解更多有關 ThemeData 的信息。

讓咱們在 app.dart 中導入 colors.dart。

import 'colors.dart';
複製代碼

而後將如下內容添加到 app.dart 的 ShrineApp 類以外的地方：

// TODO：構建 Shrine 主題（103）
final ThemeData _kShrineTheme = _buildShrineTheme();

ThemeData _buildShrineTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    accentColor: kShrineBrown900,
    primaryColor: kShrinePink100,
    buttonColor: kShrinePink100,
    scaffoldBackgroundColor: kShrineBackgroundWhite,
    cardColor: kShrineBackgroundWhite,
    textSelectionColor: kShrinePink100,
    errorColor: kShrineErrorRed,
    // TODO：添加文本主題（103）
    // TODO：添加圖標主題（103）
    // TODO：修飾輸入內容（103）
  );
}
複製代碼

如今在應用的 build() 函數最後(在 MaterialApp 部件中)將 theme: 設成咱們的新主題：

// TODO：添加主題（103）
return MaterialApp(
  title: 'Shrine',
  // TODO：將 home: 改成 HomePage frontLayer（104）
  home: HomePage(),
  // TODO：讓 currentCategory 字段持有 _currentCategory（104）
  // TODO：向 frontLayer 傳遞 _currentCategory（104）
  // TODO：將 backLayer 字段值改成 CategoryMenuPage（104）
  initialRoute: '/login',
  onGenerateRoute: _getRoute,
  theme: _kShrineTheme, // 新加代碼
);
複製代碼

點擊運行按鈕，你的登錄頁面看起來應該是這個樣子的：

你的主屏幕看起來應該像這樣：

有關顏色（Color）和主題(Theme)的注意事項：

你能夠自定義 UI 中的顏色以便詮釋你的品牌特點。

從兩種顏色（主要和次要顏色）開始製做調色板，使用不一樣色度的顏色。或者使用 Material Design 調色盤工具生成。

不要忘記排版的顏色！

確保文本與背景的顏色對比度適中（主文本爲 3:1，副文本爲 4:1）

5. 修改排版和標籤樣式

除了更改顏色，設計師還爲咱們提供了特定的排版。Flutter 的 ThemeData 包含 3 種文本主題。每一個文本主題都是一個文本樣式的集合，如「headline」和「title」。咱們將爲咱們的應用使用幾種樣式並更改一些值。

定製文本主題

爲了將字體導入項目，咱們必須將它們添加到 pubspec.yaml 文件中。

在 pubspec.yaml 中，在 flutter: 標籤下添加如下內容：

# TODO：引入字體（103）
  fonts:
    - family: Rubik
      fonts:
        - asset: fonts/Rubik-Regular.ttf
        - asset: fonts/Rubik-Medium.ttf
          weight: 500
複製代碼

如今你能夠訪問並使用 Rubik 字體了。

pubspec 文件故障排除

若是你剪切並粘貼上面的聲明代碼，你可能會在運行 pub get 時遇到錯誤。若是出現錯誤，請先刪除前導空格，而後使用空格縮進替換空格。

fonts:
複製代碼

以前有兩個空格，

family: Rubik
複製代碼

以前有四個空格，以此類推。

若是你看到 Mapping values are not allowed here（此處不容許存在映射值），檢查問題所在行以及上方的其餘行的縮進。

app.dart 中，在 _buildShrineTheme() 以後添加以下內容：

// TODO：構建 Shrine 文本主題（103）
TextTheme _buildShrineTextTheme(TextTheme base) {
  return base.copyWith(
    headline: base.headline.copyWith(
      fontWeight: FontWeight.w500,
    ),
    title: base.title.copyWith(
        fontSize: 18.0
    ),
    caption: base.caption.copyWith(
      fontWeight: FontWeight.w400,
      fontSize: 14.0,
    ),
  ).apply(
    fontFamily: 'Rubik',
    displayColor: kShrineBrown900,
    bodyColor: kShrineBrown900,
  );
}
複製代碼

這須要一個文本主題而且更改 headline、titles 和 captions 的樣式。

用這種方式應用 fontFamily 僅將更改應用於 copyWith() 字段中指定的（headline, title, caption）排版比例。

對於某些字體，咱們正在爲其設置自定義 FontWeight。FontWeight 部件在 100s 上具備方便的值。在字體中，w500（權值（weight）500）是中等大小，w400 是常規大小。

使用新的文本主題

文本主題

文本主題是確保應用內全部文本一致且可讀的有效方法。例如，文本主題樣式能夠是黑色或白色，具體取決於主題主要顏色的亮度。這可確保文本與背景造成適當的對比，使其始終可讀。

在 Flutter 文檔中瞭解有關文本主題的更多信息。

在 _buildShrineTheme 的 errorColor 後添加如下內容：

// TODO：添加文本主題（103）

textTheme: _buildShrineTextTheme(base.textTheme),
primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),
複製代碼

在點擊中止按鈕後再次點擊容許按鈕。

登錄頁面和主屏幕中的文本看起來有些不一樣 —— 有些使用 Rubik 字體，其餘文本則呈現棕色，而不是黑色或白色。

有關排版的注意事項：

當選擇文本字體時注意，爲小號和主體文本選擇清晰的字體，而不是注重某種樣式。

用做標題的、大號文本的字體應該用來表達或強調品牌。

注意到沒有，咱們的圖標仍然時白色的，這是由於它們有一個另外的主題。

使用自定義的主要圖標主題

將其添加到 _buildShrineTheme() 函數：

// TODO: 添加圖標主題（103）
primaryIconTheme: base.iconTheme.copyWith(
    color: kShrineBrown900
),
複製代碼

單擊運行按鈕。

應用欄的圖標變成棕色的了！

收縮文本

咱們的標籤有點太大了。

在 home.dart 中，改變 children: 字段最內部的列：

// TODO：改變最內部的列（103）
children: <Widget>[
// TODO：處理溢出標籤（103）

  Text(
    product == null ? '' : product.name,
    style: theme.textTheme.button,
    softWrap: false,
    overflow: TextOverflow.ellipsis,
    maxLines: 1,
  ),
  SizedBox(height: 4.0),
  Text(
    product == null ? '' : formatter.format(product.price),
    style: theme.textTheme.caption,
  ),
  // 新增代碼結尾
],
複製代碼

居中放置文本

咱們想要將標籤居中，並將文本與每張卡片的底部，而不是圖片的底部對齊。

將標籤移動到主軸的結尾（底部）並將它們改成居中：

// TODO：將標籤對齊底部和中心（103）

  mainAxisAlignment: MainAxisAlignment.end,
  crossAxisAlignment: CrossAxisAlignment.center,
複製代碼

保存項目。

已經很接近了，可是文本還不是在卡片的居中位置。

更改父列的橫軸對齊：

// TODO：卡片內容居中（103）

    crossAxisAlignment: CrossAxisAlignment.center,
複製代碼

保存項目。你的應用應該看起來像這樣：

這樣看起來好多了。

主題化文本框

你也可使用 InputDecorationTheme 來主題化文本框的修飾。

在 app.dart 中的 _buildShrineTheme() 方法裏，指定 inputDecorationTheme: 的值：

// TODO：修飾輸入內容（103）

inputDecorationTheme: InputDecorationTheme(
  border: OutlineInputBorder(),
),
複製代碼

如今，文本框有一個 filled 修飾。讓咱們移除它。

在 login.dart 內，移除 filled: true 值：

// 移除 filled: true 值（103）
TextField(
  controller: _usernameController,
  decoration: InputDecoration(
    // 移除 filled: true
    labelText: 'Username',
  ),
),
SizedBox(height: 12.0),
TextField(
  controller: _passwordController,
  decoration: InputDecoration(
    // 移除 filled: true
    labelText: 'Password',
  ),
  obscureText: true,
),
複製代碼

單擊中止按鈕，而後單擊運行（爲了從頭開始啓動應用程序）。你的登錄頁面在用戶名文本框處於活動狀態時（當你輸入時）應該是這樣的：

在正確的強調色文本框修飾和浮動佔位符渲染中輸入。可是咱們不能輕易地看到它。給那些沒法區分足夠高色彩對比度像素的人帶設置了障礙。（更多詳細信息，參看 Material 指南中有關「無障礙顏色」的色彩文章。）讓咱們建立一個特殊類來覆蓋部件的強調顏色，將其變成設計師在上面的顏色主題中爲咱們提供的 PrimaryVariant。

在 login.dart 中任何其餘類的範圍以外添加如下內容：

// TODO：添增強調色覆蓋（103）
class AccentColorOverride extends StatelessWidget {
  const AccentColorOverride({Key key, this.color, this.child})
      : super(key: key);

  final Color color;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Theme(
      child: child,
      data: Theme.of(context).copyWith(accentColor: color),
    );
  }
}
複製代碼

下一步，將 AccentColorOverride 應用到文本框。

在 login.dart 中，導入 colors：

import 'colors.dart';
複製代碼

使用新的部件包裝 Username 文本框：

// TODO：使用 AccentColorOverride 包裝 Username（103）
// [Name]
AccentColorOverride(
  color: kShrineBrown900,
  child: TextField(
    controller: _usernameController,
    decoration: InputDecoration(
      labelText: 'Username',
    ),
  ),
),
複製代碼

一樣使用新的部件包裝 Password 文本框：

// TODO：使用 AccentColorOverride 包裝 Password（103）
// [Password]
AccentColorOverride(
  color: kShrineBrown900,
  child: TextField(
    controller: _passwordController,
    decoration: InputDecoration(
      labelText: 'Password',
    ),
  ),
),
複製代碼

單擊運行按鈕。

6. 調整高度

如今你已經爲頁面設置了與 Shrine 相匹配的特定顏色和排版，讓咱們看看展現 Shrine 產品的卡片。這些卡片位於導航旁邊的白色平面上。

調整卡片高度

在 home.dart 中爲卡片添加 elevation: 值：

// TODO：調整卡片高度（103）

    elevation: 0.0,
複製代碼

保存你的項目。

如今你已經移除了卡片下的陰影。

讓咱們更改登錄頁面組件的高度來補全它。

調整 NEXT 按鈕的高度

RaisedButton 的默認高度是 2。讓咱們把它調高一點。

在 login.dart 中爲 NEXT RaisedButton 添加 elevation: 值：

RaisedButton(
  child: Text('NEXT'),
  elevation: 8.0, // 新增代碼
複製代碼

單擊中止按鈕，而後單擊運行。你的登錄頁面看起來應該是這樣的：

關於高度(Elevation)的說明：

全部 Material Design 的平面（surface）和組件都擁有高度值。

一個平面末尾與另外一個平面開始的分隔由平面的邊緣區分。

表面之間的高差可使用暗淡的或明亮的背景或陰影來表示。

其它平面前的平面一般包含更重要的內容。

7. 添加形狀

Shrine 定義了八角形或矩形的元素，它具備酷炫的幾何風格。讓咱們在主屏幕上的卡片以及登陸屏幕上的文本字段和按鈕中實現形狀樣式。

在登陸屏幕上更改文本字段的形狀

在 app.dart 中，導入 special cut corners border 文件：

import 'supplemental/cut_corners_border.dart';
複製代碼

仍是在 app.dart 中，在文本字段的修飾主題上添加一個帶有切角的形狀：

// TODO：修飾輸入內容（103）
inputDecorationTheme: InputDecorationTheme(
  border: CutCornersBorder(), // 替換代碼
),
複製代碼

在登陸屏幕上更改按鈕形狀

在 login.dart 中，向 CANCEL 按鈕添加一個斜面矩形邊框：

FlatButton(
  child: Text('CANCEL'),

  shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(7.0)),
  ),
複製代碼

FlatButton 沒有可見的形狀，爲何咱們要添加邊框形狀？這樣觸摸時，波紋動畫將綁定到相同的形狀。

如今給 NEXT 按鈕添加一樣的形狀：

RaisedButton(
  child: Text('NEXT'),
  elevation: 8.0,
  shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(7.0)),
  ),
複製代碼

關於形狀的說明：

使用形狀能夠促進品牌的視覺表達。

形狀具備可調曲線和無角度拐角，曲線和邊角以及拐角總數。

組件的形狀不該該干擾其可用性！

單擊中止按鈕，而後單擊運行：

8. 修改佈局

接下來，讓咱們更改佈局以顯示不一樣寬高比和大小的卡片，以便使每張卡片看起來都是不一樣的。

用 AsymmetricView 替換 GridView

咱們已經爲不對稱的佈局編寫了文件。

在 home.dart 中，修改如下全部文件：

import 'package:flutter/material.dart';

import 'model/products_repository.dart';
import 'model/product.dart';
import 'supplemental/asymmetric_view.dart';

class HomePage extends StatelessWidget {
  // TODO：爲 Category 添加變量（104）

  @override
  Widget build(BuildContext context) {
  // TODO：返回一個 AsymmetricView（104）
  // TODO：傳遞 Category 變量給 AsymmetricView（104）
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            print('Menu button');
          },
        ),
        title: Text('SHRINE'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              print('Search button');
            },
          ),
          IconButton(
            icon: Icon(Icons.tune),
            onPressed: () {
              print('Filter button');
            },
          ),
        ],
      ),
      body: AsymmetricView(products: ProductsRepository.loadProducts(Category.all)),
    );
  }
}
複製代碼

保存項目。

如今產品以編織圖案風格水平滾動。此外狀態欄文本（頂部的時間和網絡）如今爲黑色。那是由於咱們將 AppBar 的 brightness 改成了 light，brightness: Brightness.light

9. 嘗試另外一個主題

顏色是詮釋品牌的有效方式，顏色的微小變化會對您的用戶體驗產生很大影響。爲了測試這一點，讓咱們看看若是品牌的配色方案徹底不一樣時 Shrine 會是什麼樣子。

修改顏色

在 colors.dart 中，添加如下內容：

const kShrineAltDarkGrey = const Color(0xFF414149);
const kShrineAltYellow = const Color(0xFFFFCF44);
複製代碼

在 app.dart 中，按照如下內容修改 _buildShrineTheme() 和 _buildShrineTextTheme 方法：

ThemeData _buildShrineTheme() {
  final ThemeData base = ThemeData.dark();
  return base.copyWith(
    accentColor: kShrineAltDarkGrey,
    primaryColor: kShrineAltDarkGrey,
    buttonColor: kShrineAltYellow,
    scaffoldBackgroundColor: kShrineAltDarkGrey,
    cardColor: kShrineAltDarkGrey,
    textSelectionColor: kShrinePink100,
    errorColor: kShrineErrorRed,
    textTheme: _buildShrineTextTheme(base.textTheme),
    primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
    accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),
    primaryIconTheme: base.iconTheme.copyWith(
      color: kShrineAltYellow
    ),
    inputDecorationTheme: InputDecorationTheme(
      border: CutCornersBorder(),
    ),
  );
}

TextTheme _buildShrineTextTheme(TextTheme base) {
  return base.copyWith(
    headline: base.headline.copyWith(
      fontWeight: FontWeight.w500,
    ),
    title: base.title.copyWith(
      fontSize: 18.0
    ),
    caption: base.caption.copyWith(
      fontWeight: FontWeight.w400,
      fontSize: 14.0,
    ),
  ).apply(
    fontFamily: 'Rubik',
    displayColor: kShrineSurfaceWhite,
    bodyColor: kShrineSurfaceWhite,
  );
}
複製代碼

在 login.dart 中，將鑽石標誌變成白色：

Image.asset(
  'assets/diamond.png',
  color: kShrineBackgroundWhite, // 新增代碼
),
複製代碼

仍是在 login.dart 中，將兩個文本字段的強調色覆蓋更改成黃色：

AccentColorOverride(
  color: kShrineAltYellow, // 修改的代碼
  child: TextField(
    controller: _usernameController,
    decoration: InputDecoration(
      labelText: 'Username',
    ),
  ),
),
SizedBox(height: 12.0),
AccentColorOverride(
  color: kShrineAltYellow, // 修改的代碼
  child: TextField(
    controller: _passwordController,
    decoration: const InputDecoration(
      labelText: 'Password',
    ),
  ),
),
複製代碼

在 home.dart 中，修改 brightness 爲 dark：

brightness: Brightness.dark,
複製代碼

保存項目。如今應該出現新的主題了。

結果很是不一樣！讓咱們在轉到 104 教程以前還原這個顏色代碼。

下載 MDC-104 初始代碼

10. 總結

到目前爲止，您已經建立了一個按照設計師設計規範設計的應用程序。

完整的 MDC-103 應用程序可在 104-starter_and_102-complete 分支中找到。

您能夠針對該分支中的應用測試您的頁面版本。

下一步

你如今已經使用過了如下 MDC 組件：主題、排版、高度和形狀。你能夠在 MDC-Flutter 庫中探索更多組件和子系統。

深刻 supplemental 目錄中的文件來了解咱們是如何製做水平滾動的，非對稱的佈局網格的。

若是您的應用程序設計包含 MDC 庫中沒有的組件元素該怎麼辦？在 MDC-104: Material Design 高級組件一文中咱們將展現如何使用 MDC 庫建立自定義組件以實現特定外觀。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到掘金翻譯計劃對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

[譯] MDC-103 Flutter: Material Theming 的顏色、形狀、高度和類型（Flutter）

MDC-103 Flutter: Material Theming 的顏色、形狀、高度和類型（Flutter）

1. 介紹

你將構建一個

本教程中使用到的 MDC-Flutter 組件和子系統

你將須要

要在 iOS 上構建和運行 Flutter 應用程序，你須要知足如下要求：

要在 Android 上構建和運行 Flutter 應用程序，你須要知足如下要求：

2. 安裝 Flutter 環境

前提條件

3. 下載教程初始應用程序

從 MDC-102 繼續？

從頭開始？

下載初始應用程序

...或者從 GitHub 克隆它

建立項目

打開項目

運行初始程序

4. 調整顏色（Color）

建立 colors.dart

自定義調色板（Color palette）

Colors 類

MaterialColor 類

定製 ThemeData.light()

拷貝 ThemeData 實例

5. 修改排版和標籤樣式

定製文本主題

pubspec 文件故障排除

使用新的文本主題

文本主題

使用自定義的主要圖標主題

收縮文本

居中放置文本

主題化文本框

6. 調整高度

調整卡片高度

調整 NEXT 按鈕的高度

7. 添加形狀

在登陸屏幕上更改文本字段的形狀

在登陸屏幕上更改按鈕形狀

8. 修改佈局

用 AsymmetricView 替換 GridView

9. 嘗試另外一個主題

修改顏色

10. 總結

下一步

建立 `colors.dart`