Flutter 處理主題 Theme 的一些建議

原文 https://medium.com/@ahmed.salamay/what-to-consider-when-dealing-with-flutter-theme-ced376524a15

前言

主題通過(guò)指定一套顏色和文本樣式的系統(tǒng)，幫助應(yīng)用程序獲得結(jié)構(gòu)化設(shè)計(jì)和統(tǒng)一性。主題使您能夠快速實(shí)現(xiàn) UI，而不必強(qiáng)調(diào)次要細(xì)節(jié)，比如為每個(gè) widget 指定確切的顏色。

正文

為什么選擇 Theme 主題？

您希望框架與您一起工作，而不是與您作對(duì)，所以請(qǐng)嘗試?yán)媚鷵碛械慕M件和功能
這將是很容易使用的黑暗和光線主題和切換之間
改變您的應(yīng)用程序的外觀和感覺(jué)是很容易的，而不需要改變您編寫(xiě)的每一行代碼
所有應(yīng)用程序的組件和字體都是相同的，所以應(yīng)用程序的大部分設(shè)計(jì)幾乎是自動(dòng)就位的。
例如，不需要記住標(biāo)題應(yīng)該是 24 SP 30，或者復(fù)制每個(gè) widget 的確切顏色
由于您將輸入更少的代碼，因此您的開(kāi)發(fā)時(shí)間將減少
您將輸入更少的代碼，并且頁(yè)面將很小，只顯示組件，而不顯示樣式
例如，每當(dāng)您想聲明一個(gè) TextField 時(shí)，您將每次輸入這個(gè)而不是長(zhǎng)裝飾 obj，從 1 行到 45 行，它可能或多或少取決于您的樣式

色彩處理

Flutter 主題數(shù)據(jù)具有一定的 gaps 和 flows ，例如，并非所有的組件都應(yīng)用于主題數(shù)據(jù)對(duì)象中的配色方案

看看這個(gè)例子，只定義了橙色的唯一主色值

那么我該如何克服這個(gè)問(wèn)題呢？

所有這些問(wèn)題都會(huì)按照這個(gè) https://github.com/flutter/flutter/issues/91772 得到解決但在此之前，我建議您使用 FlexColorScheme 包。

https://docs.flexcolorscheme.com/

FlexColorScheme 不僅解決了這些問(wèn)題，而且還有更多的特性:

https://docs.flexcolorscheme.com/

為不同的 AppBar 樣式提供一個(gè)快速切換，而不需要每次都手動(dòng)為它制作一個(gè)自定義主題，包括與 TabBar 相匹配的主題。
主題的 Android 系統(tǒng)導(dǎo)航欄，以匹配您的應(yīng)用程序主題，并使其部分或完全透明。
在應(yīng)用程序中實(shí)現(xiàn)多種顏色方案之間的輕松切換
提供一個(gè)簡(jiǎn)單的方法，使主題的主要顏色品牌和混合背景和表面。能夠輕松地改變不同表面的混合水平。
還有，到 playground 上去發(fā)現(xiàn)更多的 https://rydmike.com/flexcolorscheme/themesplayground-v6/#/

文本主題

使用文本主題是很困難的，并且不建議你更改 ThemeData 對(duì)象中的 TextTheme，因?yàn)槟銜?huì)意外地更改一些你不知道的東西，例如日期選擇器，除非你確切地知道這些更改將如何影響你的應(yīng)用程序。

問(wèn)題是 flutter 沒(méi)有記錄哪個(gè)文本樣式應(yīng)用于哪個(gè)組件，所以你必須自己去發(fā)現(xiàn)它

另外，您必須知道不能在調(diào)用 TextTheme() 構(gòu)造函數(shù)時(shí)混合使用 2018 和 2021 術(shù)語(yǔ)。

2018 年的術(shù)語(yǔ)是標(biāo)題 1，標(biāo)題 2，標(biāo)題 3，標(biāo)題 4，標(biāo)題 5，標(biāo)題 6，字幕 1，字幕 2，body Text1，body Text2，標(biāo)題，按鈕，概述

而 2021 年的術(shù)語(yǔ)是 display Large，displayMedium，displaySmall，headline Large，headline Medium，headline Small，titleLarge，titleMedium，title Small，body Large，body Small，label Large，label Medium，label Small,

如果您選擇更改文本主題數(shù)據(jù)樣式，下面是一些將受到影響的組件

Body Large => TabBar Title, TimePicker Numbers (Clock)
Body Medium => The Default Text, Tooltip, ListTile Subtitle, and trailing
Body Small => The DatePicker day's numbers (1 to 30)
Title Large => App Bar Title, Dialog Title
Title Medium => ListTile title, StatefulHeaderCard title, DropdownMenuItem Selected Text, Dialog Content, Am/PM inside Time Picker
Title Small => The Month Section inside Date Picker, Error Text inside Text Field
Display Medium => Selected Time inside Time Picker
Headline Small => The selected date inside Date Picker