Flutter 設計使您的主題同質化

會煮咖啡的貓發表於2021-06-30

Flutter

貓哥說

如果你和我一樣長期面對電腦，分享幾個對眼睛有好處的經驗

竟可能的室內用自然光，關掉多餘的光源
顯示器解析度比例調小，字型大些
如果你需要更多螢幕空間，可以加一個輔助螢幕
可能的話去慢慢適應暗色主題
顏色調的對比度低些
連續工作 2 小時，起來走走讓眼睛眺望下遠方

當然並不是所有人都適合，讓自己的眼睛舒服就行

這篇文章是告訴你如何通過 ThemeData 來全域性管理 Flutter 的介面樣式。

有一次我專案做完，已經通過了評審，然後產品和我說要調下樣式，刷的一下，給我了一個新的 sketch 設計稿，我的內心是抗拒的，但是隻能耐心的去分析這個新版的樣式標準，幸好設計師是一個設計學科的碩士做事還算規範。

然後我通過 ThemeData 解決了 90% 的問題，因為我在程式碼中儘可能的用官方元件，這樣在 ThemeData 中還能找到這個物件。

剩下的自定義元件，應為我有抽取公共元件，所以改改就完成了。

閱讀建議，你可以通過我的譯文大致的瞭解內容，如果感興趣可以通過原文細細品味，下方有原文連結。

老鐵記得轉發，貓哥會呈現更多 Flutter 好文~~~~

微信群 ducafecat

b 站 space.bilibili.com/404904528

原文

medium.com/flutter-com…

程式碼

github.com/GONZALEZD/f…

參考

正文

在很多 Flutter 原始碼和應用程式中，我觀察到一個反覆出現的實踐，即通過小部件引數直接新增自定義樣式，導致不一致的設計和額外的維護。作為一個個人的例子，我必須維護一個 Flutter 應用程式，其中所有標題有不同的字型大小(有時字型重量)。

在這篇文章中，我將解釋你的重要性的方式，你應該設計您的 Flutter 應用程式，尤其是關注的主題。

在您看來，這些“設定”頁面在程式碼方面的區別是什麼？

Settings page 設定頁面

應用程式主題的正確方法是什麼？

在上圖中，“設定”頁面共享完全相同的程式碼。在這個層次上，這四種設計之間沒有嚴格的區別。

這裡面沒有什麼神奇的東西: 所有的主題相關的東西都集中在更高的層次，在 MaterialApp widget 中。這個小工具允許你定義兩個主題，一個用於 light brightness，另一個用於 dark theme 模式。

此外，如果沒有給出任何價值，大多數小部件都會從中檢索它們的設計。

小部件正在從 ThemeData (大多數情況下)設定預設值

讓我們來看一個如何正確做到這一點的例子: Card widget。你可以觀察到在設定頁面的第三個例子中，形狀是直線而不是角。

而只有‘ child’屬性在程式碼中使用: Card (child: ...)

當你深入研究 Card 小部件是如何設計的時候，你會看到它的形狀是如何定義的。下面是有關 Card.shape 屬性的程式碼文件:

/// The shape of the card's [Material].
///
/// Defines the card's [Material.shape].
///
/// If this property is null then [CardTheme.shape] of [ThemeData.cardTheme]
/// is used. If that's null then the shape will be a [RoundedRectangleBorder]
/// with a circular corner radius of 4.0.
final ShapeBorder? shape;
複製程式碼

因此，為了確保“普通”卡片共享相同的設計，您必須定義自己的 ThemeData，並在 MaterialApp 小部件中使用它作為主題(或 darkTheme)。

ThemeData example() {
  final base  = ThemeData.dark();
  final mainColor = Colors.lightBlue;
  return base.copyWith(
    cardColor: Color.lerp(mainColor, Colors.white, 0.2),
    cardTheme: base.cardTheme?.copyWith(
      color: Color.lerp(mainColor, Colors.black, 0.1),
      margin: EdgeInsets.all(20.0),
      elevation: 0.0,
      shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.circular(14.0),
          side: BorderSide(color: Colors.white24, width: 1)),
    ),
  );
}
複製程式碼

上面的程式碼演示瞭如何更改卡片設計，但是您可以為來自 Flutter SDK 的幾乎所有小部件進行更改。此外，您應該將主題相關的內容集中到單個檔案中，因為 ThemeData 是一個巨大的資料結構。

主題資料涵蓋了所有的視窗小部件，對吧？

不幸的是，ThemeData 並不能覆蓋所有視窗小部件。例如，您不能在其中定義列表貼片設計。幸運的是，您可以通過 ListTileTheme 小部件實現這一點。

說明如何更改列表平鋪選定的顏色和填充，而無需在原始碼中顯式設定頁面。

通過 ListTileTheme，我們可以在不更改頁面程式碼一行的情況下重新定義選擇的標題/背景和前景色

ListView.builder(
  itemBuilder: (context, index) {
    final value = elements[index];
    return ListTile(
      selected: value == selected,
      title: Text(value.title),
      subtitle: Text(value.message),
      leading: Icon(value.icon),
      onTap: () => setState(() => selected = value),
    );
  },
  itemCount: elements.length,
);
複製程式碼

正如您在程式碼中看到的，與設計沒有任何關係。它的優點是避免程式碼噪聲，使其簡潔易懂。另外，我喜歡的一點是我所有的方法都很小(少於 30 行)。