Flutterでは、画面に見た目に関わる部分を構成する部品はすべて「Widget(ウィジェット)」として表現され、
それぞれのWidgetの設定項目は、このような感じでコンストラクタのプロパティとして設定できます。
このやり方でも問題ないのですが、Widgetの数が増えてくると管理が面倒になるという欠点があります。
そこで、WebサイトのデザインをCSSファイルで一元管理するように、Flutterでもアプリの見た目(デザイン)の設定項目もそれ専用のDartファイル(styles.dart等)を作って一元管理するといいよということを。「Single source of truth for styling」と称してFlutterの公式リファレンスに書いてくれています。
余白、形、フォントサイズなどのスタイル値について、単一の情報源を作成するとビュー(見た目)を維持することが容易になります。これは、いくつかのヘルパークラスで簡単に行うことができます(これが上の例で言う「styles.dart」のこと)。
すべてのビューが同じ共有設計システムルールを参照することで、見た目が良くなり、一貫性が保たれます。特定のプラットフォームに対応するための変更や値の調整も、検索や置換でエラーを起こすことなく、一箇所で行うことができます。また、ルールを共有することで、設計側にも一貫性を持たせることができるという利点もあります。
この方法で表現できる一般的なデザインシステムのカテゴリーには、次のようなものがあります。
- アニメーションのタイミング
- サイズとブレークポイント(画面サイズの区切り)
- 余白
- Widgetの形
- 影
- 線の太さ
- フォントの種類・大きさ・スタイル
この「Single Source of Truth(信頼できる唯一の情報源:SSOT)」というのは、「情報システムの設計と理論においては、すべてのデータが1か所でのみ作成、あるいは編集されるように、情報モデルと関連するデータスキーマとを構造化する方法」を意味するソフトウェア用語で、情報の一貫性を保つために有用な手法と言われています。
ここで紹介した「Single source of truth for styling」はその考え方をデザインの設定に応用したということのようです。
(詳しくは、以下の動画で解説していますので、よろしければご覧ください)