【お知らせ】みんプロ式Flutter講座は2026年4月末をもって新規販売を終了いたしました。詳しくはこちら →

[Flutter]「Single source of truth for styling」とは(見た目にかかわる設定項目は1つのDartファイルにまとめた方がいい)

このページには広告が含まれる場合があります。

 

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」はその考え方をデザインの設定に応用したということのようです。

(詳しくは、以下の動画で解説していますので、よろしければご覧ください)

こんな記事も読まれています

GAMBO(願望) 願望実現・目標達成の
17秒 / 68秒ワーク
GAMBO(願望) 引き寄せ難民だったぼくの挫折経験から生まれた誰でもできる願望実現サポートアプリ。かの有名な17秒/68秒ワークを独自の視覚化メソッドで簡単実践。
App Store / Google Play 詳しく見る →
Meiso(瞑想) 鐘音と自然音で
5分からのマインドフルネス
Meiso(瞑想) 初心者でも“迷わず続けられる”ことにこだわった、完全無料の瞑想アプリ。画面のガイドに従うだけで呼吸のリズムが整い、最短5分から瞑想を実践できます。
App Store / Google Play 詳しく見る →
小学生からの英検®単語 A ふりがな・音声付き
英検単語1日5分トレーニング
小学生からの英検®単語 ありそうでなかった!ふりがな付き英検®単語トレーニングアプリ!1日たった5分!スキマ時間を活用して、英検®頻出単語を効率的に習得。お子様の一人学習にも安心設計。
App Store / Google Play 詳しく見る →
オボエルンジャー レトロゲームで
nバック脳トレ
オボエルンジャー 科学的脳力開発法「Nバック課題」をファミコン風8bitレトロゲームにアレンジした新感覚脳トレアプリ。記憶力・感情コントロール力・集中力の向上に。
App Store / Google Play 詳しく見る →
ゴイコイコイ 超高速フラッシュカードで
語彙習得
ゴイコイコイ 日常語1400語を視覚的に学べる、高速読み上げフラッシュカード式の語彙トレーニングアプリ。知育教室で行われるフラッシュカード学習を、家庭で“手軽に・安価に・正確に”再現。
App Store / Google Play 詳しく見る →

TOP