[译] MDC-103 Flutter: Material Theming 的颜色、形状、高度和类型（Flutter）
- 原文地址：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/develop
現在可以使用 MDC 來為你的應用程序定制遠比以前獨特的樣式。Material Design 近期的更新使得設計師和開發者可以更靈活地表達他們的產品理念。
在教程 MDC-101 和 MDC-102 中，你使用 Material 組件（MDC）為一個名為 Shrine 的銷售服裝和家居用品的電子商務應用程序構建基礎。這個應用的用戶使用流程包括一個開始的登陸頁面，然后導航用戶前往展示商品的主屏幕。
你將構建一個
在本教程中，你將會使用以下屬性來定制 Shrine 應用：
- 顏色（Color）
- 排版（Typography）
- 高度（Elevation）
- 形狀（Shape）
- 布局（Layout）
這是四篇教程中的第三篇，來引導你構建 Shrine 應用。
其余教程可在這里找到：
- MDC-101：Material Components（MDC）基礎（Flutter）
- MDC-102：Material 結構和布局
- MDC-104: Material Design 高級組件
到 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 開發移動應用程序，你需要：
- Flutter SDK
- 裝有 Flutter 插件的 IntelliJ IDE，或者你喜歡的代碼編輯器
Flutter 的 IDE 工具適用于 Android Studio、IntelliJ IDEA Community（免費）和 IntelliJ IDEA Ultimate。
要在 iOS 上構建和運行 Flutter 應用程序，你需要滿足以下要求：- 運行 macOS 的計算機
- Xcode 9 或更新版本
- iOS 模擬器，或者 iOS 物理設備
- 運行 macOS，Windows 或者 Linux 的計算機
- Android Studio
- Android 模擬器（隨 Android Studio 一起提供）或 Android 物理設備
獲取詳細的 Flutter 安裝信息
重要提示： 如果連接到計算機的 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 項目。
在構建項目一次之前，你可以忽略在分析中見到的任何錯誤。
提示：確保你已安裝 Flutter 和 Dart 插件。
運行初始程序
以下步驟默認你在 Android 模擬器或設備上進行測試。你也可以在 iOS 模擬器或設備上進行，只要你安裝了 Xcode。
如果 Android 模擬器尚未運行，請選擇 Tools -> Android -> AVD Manager 來創建您設備并啟動模擬器。如果 AVD 已存在，你可以直接在 IntelliJ 的設備選擇器中啟動模擬器，如下一步所示。
（對于 iOS 模擬器，如果它尚未運行，通過選擇 Flutter Device Selection -> Open iOS Simulator 來在你的開發設備上啟動它。）
- 在你的編輯器窗口頂部尋找 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: Rubikfonts:- asset: fonts/Rubik-Regular.ttf- asset: fonts/Rubik-Medium.ttfweight: 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: truelabelText: 'Username',), ), SizedBox(height: 12.0), TextField(controller: _passwordController,decoration: InputDecoration(// 移除 filled: truelabelText: '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;@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. 調整高度
現在你已經為頁面設置了與 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）@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)),);} } 復制代碼保存項目。
現在產品以編織圖案風格水平滾動。此外狀態欄文本（頂部的時間和網絡）現在為黑色。那是因為我們將 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）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： AndroidStudio中Flutte
- 下一篇： 汇编语言学习笔记(五)