• 原文地址：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）幫助開發(fā)者實現(xiàn) Material Design。MDC 由谷歌團隊的工程師和 UX 設(shè)計師創(chuàng)造，為 Android、iOS、Web 和 Flutter 提供很多美觀實用的 UI 組件。

material.io/develop

現(xiàn)在可以使用 MDC 來為你的應用程序定制遠比以前獨特的樣式。Material Design 近期的更新使得設(shè)計師和開發(fā)者可以更靈活地表達他們的產(chǎn)品理念。

在教程 MDC-101 和 MDC-102 中，你使用 Material 組件（MDC）為一個名為 Shrine 的銷售服裝和家居用品的電子商務應用程序構(gòu)建基礎(chǔ)。這個應用的用戶使用流程包括一個開始的登陸頁面，然后導航用戶前往展示商品的主屏幕。

你將構(gòu)建一個

在本教程中，你將會使用以下屬性來定制 Shrine 應用：

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

這是四篇教程中的第三篇，來引導你構(gòu)建 Shrine 應用。

其余教程可在這里找到：

• MDC-101：Material Components（MDC）基礎(chǔ)（Flutter）
• MDC-102：Material 結(jié)構(gòu)和布局
• MDC-104: Material Design 高級組件

到 MDC-104 的最后，你將會構(gòu)建一個像這樣的應用：

本教程中使用到的 MDC-Flutter 組件和子系統(tǒng)

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

你將需要

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

要在 iOS 上構(gòu)建和運行 Flutter 應用程序，你需要滿足以下要求：

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

要在 Android 上構(gòu)建和運行 Flutter 應用程序，你需要滿足以下要求：

• 運行 macOS、Windows 或 Linux 的計算機
• Android Studio
• Android 模擬器（隨 Android Studio 一起提供）或 Android 物理設(shè)備

2. 安裝 Flutter 環(huán)境

前提條件

要開始使用 Flutter 開發(fā)移動應用程序，你需要：

• Flutter SDK
• 裝有 Flutter 插件的 IntelliJ IDE，或者你喜歡的代碼編輯器

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

要在 iOS 上構(gòu)建和運行 Flutter 應用程序，你需要滿足以下要求：

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

要在 Android 上構(gòu)建和運行 Flutter 應用程序，你需要滿足以下要求：

• 運行 macOS，Windows 或者 Linux 的計算機
• Android Studio
• Android 模擬器（隨 Android Studio 一起提供）或 Android 物理設(shè)備

獲取詳細的 Flutter 安裝信息

重要提示： 如果連接到計算機的 Android 手機上出現(xiàn)“允許 USB 調(diào)試”對話框，請啟用始終允許從此計算機選項，然后單擊確定。

在繼續(xù)本教程之前，請確保你的 SDK 處于正確的狀態(tài)。如果之前安裝過 Flutter SDK，則使用 flutter upgrade 來確保 SDK 處于最新版本。

flutter upgrade 復制代碼

運行 flutter upgrade 將自動運行 flutter doctor。如果這是首次安裝 Flutter 且不需升級，那么請手動運行 flutter doctor。查看顯示的所有 ? 標記；這將會下載你需要的任何缺少的 SDK 文件，并確保你的計算機配置無誤以進行 Flutter 的開發(fā)。

flutter doctor 復制代碼

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

從 MDC-102 繼續(xù)？

如果你完成了 MDC-102，那么本教程所需代碼應該已經(jīng)準備就緒，跳轉(zhuǎn)到調(diào)整顏色一步。

從頭開始？

下載初始應用程序

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 連續(xù)構(gòu)建。所以當你完成 103 的代碼后，它將變成 104 教程的初始代碼！代碼被分成不同的分支，你可以使用以下命令將它們?nèi)苛谐?#xff1a;

git branch --list

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

建立你的項目

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

創(chuàng)建項目

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

運行 flutter create mdc_100_series

打開項目

打開 Android Studio。

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

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

在構(gòu)建項目一次之前，你可以忽略在分析中見到的任何錯誤。

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

如果出現(xiàn)提示，安裝所有平臺和插件更新或 FlutterRunConfigurationType，然后重新啟動 Android Studio。

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

運行初始程序

以下步驟默認你在 Android 模擬器或設(shè)備上進行測試。你也可以在 iOS 模擬器或設(shè)備上進行，只要你安裝了 Xcode。

選擇設(shè)備或模擬器

如果 Android 模擬器尚未運行，請選擇 Tools -> Android -> AVD Manager 來創(chuàng)建您設(shè)備并啟動模擬器。如果 AVD 已存在，你可以直接在 IntelliJ 的設(shè)備選擇器中啟動模擬器，如下一步所示。

（對于 iOS 模擬器，如果它尚未運行，通過選擇 Flutter Device Selection -> Open iOS Simulator 來在你的開發(fā)設(shè)備上啟動它。）

啟動 Flutter 應用：

• 在你的編輯器窗口頂部尋找 Flutter Device Selection 下拉菜單，然后選擇設(shè)備（例如，iPhone SE / Android SDK built for ）。
• 點擊運行圖標（）。

如果你無法成功運行此應用程序，停下來解決你的開發(fā)環(huán)境問題。嘗試導航到 material-components-flutter-codelabs；如果你在終端中下載 .zip 文件，導航到 material-components-flutter-codelabs-... 然后運行 flutter create mdc_100_series。

成功！上一篇教程中 Shrine 的登陸頁面應該在你的模擬器中運行了。你可以看到 Shrine 的 logo 和它下面的名稱 "Shrine"。

如果應用沒有更新，再次單擊 “Play” 按鈕，或者點擊 “Play” 后的 “Stop”。

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

4. 調(diào)整顏色（Color）

一個代表著 Shrine 品牌的配色方案已經(jīng)創(chuàng)建好了。設(shè)計師希望你在 Shrine 應用中實現(xiàn)這個配色方案。

首先，讓我們在項目里導入這些顏色。

創(chuàng)建 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; 復制代碼

自定義調(diào)色板（Color palette）

此顏色主題由設(shè)計師自選顏色進行創(chuàng)建（如下圖所示）。它包含 Shrine 的品牌色并應用于 Material 主題編輯器，由此衍生出的完整的調(diào)色板。（這些顏色并非來自 2014 Material color palette。）

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

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

每個部件的顏色參數(shù)都對應此模板內(nèi)的顏色。例如，文本框在接收輸入時的修飾顏色應該是主題的 Primary color。如果該顏色不合適（易于與背景區(qū)分），請改用 PrimaryVariant。

Colors 類

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

MaterialColor 類

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

這些顏色是在 2014 Material 指南中提出的，并且在當前指南（顏色系統(tǒng)（Color System））以及 MDC-Flutter 中仍然可用。要在代碼里訪問它們，只需調(diào)用基礎(chǔ)色后接色度（通常為 100 的倍數(shù)）即可。例如，Pink 400 可通過 Colors.pink[400] 檢索到。

你完全可以將這些調(diào)色盤運用到你的設(shè)計和代碼上。如果已經(jīng)有屬于品牌自己的配色，也可以使用調(diào)色板生成工具或者Material 主題編輯器來生成自己的配色。

現(xiàn)在我們有想用的顏色了。我們可以將它應用到 UI 上。我們將通過設(shè)置應用于 MaterialApp 實例頂部層次結(jié)構(gòu)的 ThemeData 部件來實現(xiàn)。

定制 ThemeData.light()

Flutter 包含一些內(nèi)置主題。light 主題就是其中之一。與其從零開始制作一個 ThemeData 部件，我們不如拷貝 light 主題然后修改其中的一部分屬性來為我們的應用進行定制。

拷貝 ThemeData 實例

我們在默認的 light ThemeData 中調(diào)用 copyWith()，然后傳入一些自定義屬性值（copyWith() 在 Flutter 中是一個常用方法，你會在很多類和部件中看到它）。這個命令返回與調(diào)用它的實例匹配的部件實例，但是替換了一些指定的值。

為什么不實例化一個 ThemeData 然后設(shè)它的屬性呢？當然可以！如果我們繼續(xù)構(gòu)建我們的程序,這將很有意義。由于 ThemeData 擁有大量的屬性，為了節(jié)省時間，我們的教程將從修改一個有吸引力的主題的可見值入手。當我們稍后嘗試使用替代主題時，我們將從 MDC-Flutter 附帶的 ThemeData 開始。

在 Flutter 文檔中了解更多有關(guān) ThemeData 的信息。

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

import 'colors.dart'; 復制代碼

然后將以下內(nèi)容添加到 app.dart 的 ShrineApp 類之外的地方：

// TODO：構(gòu)建 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：修飾輸入內(nèi)容（103）); } 復制代碼

現(xiàn)在在應用的 build() 函數(shù)最后(在 MaterialApp 部件中)將 theme: 設(shè)成我們的新主題：

// 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, // 新加代碼 ); 復制代碼

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

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

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

• 你可以自定義 UI 中的顏色以便詮釋你的品牌特色。
• 從兩種顏色（主要和次要顏色）開始制作調(diào)色板，使用不同色度的顏色。或者使用 Material Design 調(diào)色盤工具生成。
• 不要忘記排版的顏色！
• 確保文本與背景的顏色對比度適中（主文本為 3:1，副文本為 4:1）

5. 修改排版和標簽樣式

除了更改顏色，設(shè)計師還為我們提供了特定的排版。Flutter 的 ThemeData 包含 3 種文本主題。每個文本主題都是一個文本樣式的集合，如 “headline” 和 “title”。我們將為我們的應用使用幾種樣式并更改一些值。

定制文本主題

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

在 pubspec.yaml 中，在 flutter: 標簽下添加以下內(nèi)容：

# TODO：引入字體（103）fonts:- family: Rubikfonts:- asset: fonts/Rubik-Regular.ttf- asset: fonts/Rubik-Medium.ttfweight: 500 復制代碼

現(xiàn)在你可以訪問并使用 Rubik 字體了。

pubspec 文件故障排除

如果你剪切并粘貼上面的聲明代碼，你可能會在運行 pub get 時遇到錯誤。如果出現(xiàn)錯誤，請先刪除前導空格，然后使用空格縮進替換空格。

fonts: 復制代碼

之前有兩個空格，

family: Rubik 復制代碼

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

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

app.dart 中，在 _buildShrineTheme() 之后添加如下內(nèi)容：

// TODO：構(gòu)建 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）排版比例。

對于某些字體，我們正在為其設(shè)置自定義 FontWeight。FontWeight 部件在 100s 上具有方便的值。在字體中，w500（權(quán)值（weight）500）是中等大小，w400 是常規(guī)大小。

使用新的文本主題

文本主題

文本主題是確保應用內(nèi)所有文本一致且可讀的有效方法。例如，文本主題樣式可以是黑色或白色，具體取決于主題主要顏色的亮度。這可確保文本與背景形成適當?shù)膶Ρ?#xff0c;使其始終可讀。

在 Flutter 文檔中了解有關(guān)文本主題的更多信息。

在 _buildShrineTheme 的 errorColor 后添加以下內(nèi)容：

// TODO：添加文本主題（103）textTheme: _buildShrineTextTheme(base.textTheme), primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme), accentTextTheme: _buildShrineTextTheme(base.accentTextTheme), 復制代碼

在點擊停止按鈕后再次點擊允許按鈕。

登陸頁面和主屏幕中的文本看起來有些不同 —— 有些使用 Rubik 字體，其他文本則呈現(xiàn)棕色，而不是黑色或白色。

有關(guān)排版的注意事項：

• 當選擇文本字體時注意，為小號和主體文本選擇清晰的字體，而不是注重某種樣式。
• 用作標題的、大號文本的字體應該用來表達或強調(diào)品牌。

注意到?jīng)]有，我們的圖標仍然時白色的，這是因為它們有一個另外的主題。

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

將其添加到 _buildShrineTheme() 函數(shù)：

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

單擊運行按鈕。

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

收縮文本

我們的標簽有點太大了。

在 home.dart 中，改變 children: 字段最內(nèi)部的列：

// TODO：改變最內(nèi)部的列（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,),// 新增代碼結(jié)尾 ], 復制代碼

居中放置文本

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

將標簽移動到主軸的結(jié)尾（底部）并將它們改為居中：

// TODO：將標簽對齊底部和中心（103）mainAxisAlignment: MainAxisAlignment.end,crossAxisAlignment: CrossAxisAlignment.center, 復制代碼

保存項目。

已經(jīng)很接近了，但是文本還不是在卡片的居中位置。

更改父列的橫軸對齊：

// TODO：卡片內(nèi)容居中（103）crossAxisAlignment: CrossAxisAlignment.center, 復制代碼

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

這樣看起來好多了。

主題化文本框

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

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

// TODO：修飾輸入內(nèi)容（103）inputDecorationTheme: InputDecorationTheme(border: OutlineInputBorder(), ), 復制代碼

現(xiàn)在，文本框有一個 filled 修飾。讓我們移除它。

在 login.dart 內(nèi)，移除 filled: true 值：

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

單擊停止按鈕，然后單擊運行（為了從頭開始啟動應用程序）。你的登陸頁面在用戶名文本框處于活動狀態(tài)時（當你輸入時）應該是這樣的：

在正確的強調(diào)色文本框修飾和浮動占位符渲染中輸入。但是我們不能輕易地看到它。給那些無法區(qū)分足夠高色彩對比度像素的人帶設(shè)置了障礙。（更多詳細信息，參看 Material 指南中有關(guān)“無障礙顏色”的色彩文章。）讓我們創(chuàng)建一個特殊類來覆蓋部件的強調(diào)顏色，將其變成設(shè)計師在上面的顏色主題中為我們提供的 PrimaryVariant。

在 login.dart 中任何其他類的范圍之外添加以下內(nèi)容：

// TODO：添加強調(diào)色覆蓋（103） class AccentColorOverride extends StatelessWidget {const AccentColorOverride({Key key, this.color, this.child}): super(key: key);final Color color;final Widget child;@overrideWidget 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. 調(diào)整高度

現(xiàn)在你已經(jīng)為頁面設(shè)置了與 Shrine 相匹配的特定顏色和排版，讓我們看看展示 Shrine 產(chǎn)品的卡片。這些卡片位于導航旁邊的白色平面上。

調(diào)整卡片高度

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

// TODO：調(diào)整卡片高度（103）elevation: 0.0, 復制代碼

保存你的項目。

現(xiàn)在你已經(jīng)移除了卡片下的陰影。

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

調(diào)整 NEXT 按鈕的高度

RaisedButton 的默認高度是 2。讓我們把它調(diào)高一點。

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

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

單擊停止按鈕，然后單擊運行。你的登陸頁面看起來應該是這樣的：

關(guān)于高度(Elevation)的說明：

• 所有 Material Design 的平面（surface）和組件都擁有高度值。
• 一個平面末尾與另一個平面開始的分隔由平面的邊緣區(qū)分。
• 表面之間的高差可以使用暗淡的或明亮的背景或陰影來表示。
• 其它平面前的平面通常包含更重要的內(nèi)容。

7. 添加形狀

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

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

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

import 'supplemental/cut_corners_border.dart'; 復制代碼

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

// TODO：修飾輸入內(nèi)容（103） inputDecorationTheme: InputDecorationTheme(border: CutCornersBorder(), // 替換代碼 ), 復制代碼

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

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

FlatButton(child: Text('CANCEL'),shape: BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(7.0)),), 復制代碼

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

現(xiàn)在給 NEXT 按鈕添加同樣的形狀：

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

關(guān)于形狀的說明：

• 使用形狀可以促進品牌的視覺表達。
• 形狀具有可調(diào)曲線和無角度拐角，曲線和邊角以及拐角總數(shù)。
• 組件的形狀不應該干擾其可用性！

單擊停止按鈕，然后單擊運行：

8. 修改布局

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

用 AsymmetricView 替換 GridView

我們已經(jīng)為不對稱的布局編寫了文件。

在 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）@overrideWidget 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)),);} } 復制代碼

保存項目。

現(xiàn)在產(chǎn)品以編織圖案風格水平滾動。此外狀態(tài)欄文本（頂部的時間和網(wǎng)絡）現(xiàn)在為黑色。那是因為我們將 AppBar 的 brightness 改為了 light，brightness: Brightness.light

9. 嘗試另一個主題

顏色是詮釋品牌的有效方式，顏色的微小變化會對您的用戶體驗產(chǎn)生很大影響。為了測試這一點，讓我們看看如果品牌的配色方案完全不同時 Shrine 會是什么樣子。

修改顏色

在 colors.dart 中，添加以下內(nèi)容：

const kShrineAltDarkGrey = const Color(0xFF414149); const kShrineAltYellow = const Color(0xFFFFCF44); 復制代碼

在 app.dart 中，按照以下內(nèi)容修改 _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 中，將兩個文本字段的強調(diào)色覆蓋更改為黃色：

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, 復制代碼

保存項目。現(xiàn)在應該出現(xiàn)新的主題了。

結(jié)果非常不同！讓我們在轉(zhuǎn)到 104 教程之前還原這個顏色代碼。

下載 MDC-104 初始代碼

10. 總結(jié)

到目前為止，您已經(jīng)創(chuàng)建了一個按照設(shè)計師設(shè)計規(guī)范設(shè)計的應用程序。

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

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

下一步

你現(xiàn)在已經(jīng)使用過了以下 MDC 組件：主題、排版、高度和形狀。你可以在 MDC-Flutter 庫中探索更多組件和子系統(tǒng)。

深入 supplemental 目錄中的文件來了解我們是如何制作水平滾動的，非對稱的布局網(wǎng)格的。

如果您的應用程序設(shè)計包含 MDC 庫中沒有的組件元素該怎么辦？在 MDC-104: Material Design 高級組件一文中我們將展示如何使用 MDC 庫創(chuàng)建自定義組件以實現(xiàn)特定外觀。

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

---

掘金翻譯計劃 是一個翻譯優(yōu)質(zhì)互聯(lián)網(wǎng)技術(shù)文章的社區(qū)，文章來源為 掘金 上的英文分享文章。內(nèi)容覆蓋 Android、iOS、前端、后端、區(qū)塊鏈、產(chǎn)品、設(shè)計、人工智能等領(lǐng)域，想要查看更多優(yōu)質(zhì)譯文請持續(xù)關(guān)注 掘金翻譯計劃、官方微博、知乎專欄。

總結(jié)

以上是生活随笔為你收集整理的[译] MDC-103 Flutter: Material Theming 的颜色、形状、高度和类型（Flutter）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。