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

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

 

Flutterでは、画面に見た目に関わる部分を構成する部品はすべて「Widget(ウィジェット)」として表現され、

blank

それぞれのWidgetの設定項目は、このような感じでコンストラクタのプロパティとして設定できます。

blank

このやり方でも問題ないのですが、Widgetの数が増えてくると管理が面倒になるという欠点があります。

そこで、WebサイトのデザインをCSSファイルで一元管理するように、Flutterでもアプリの見た目(デザイン)の設定項目もそれ専用のDartファイル(styles.dart等)を作って一元管理するといいよということを。「Single source of truth for styling」と称してFlutterの公式リファレンスに書いてくれています。

blank

余白、形、フォントサイズなどのスタイル値について、単一の情報源を作成するとビュー(見た目)を維持することが容易になります。これは、いくつかのヘルパークラスで簡単に行うことができます(これが上の例で言う「styles.dart」のこと)。

すべてのビューが同じ共有設計システムルールを参照することで、見た目が良くなり、一貫性が保たれます。特定のプラットフォームに対応するための変更や値の調整も、検索や置換でエラーを起こすことなく、一箇所で行うことができます。また、ルールを共有することで、設計側にも一貫性を持たせることができるという利点もあります。

blank

この方法で表現できる一般的なデザインシステムのカテゴリーには、次のようなものがあります。

  • アニメーションのタイミング
  • サイズとブレークポイント(画面サイズの区切り)
  • 余白
  • Widgetの形
  • 線の太さ
  • フォントの種類・大きさ・スタイル

この「Single Source of Truth(信頼できる唯一の情報源:SSOT」というのは、「情報システムの設計と理論においては、すべてのデータが1か所でのみ作成、あるいは編集されるように、情報モデルと関連するデータスキーマとを構造化する方法」を意味するソフトウェア用語で、情報の一貫性を保つために有用な手法と言われています。

ここで紹介した「Single source of truth for styling」はその考え方をデザインの設定に応用したということのようです。

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

(注)以下のフォームより当社公式メールマガジンにご登録頂くことで
約6時間のFlutter動画講座が無料で受講できます!

(メールマガジンは登録無料・いつでも解除可)

[体験版]
ゼロからのFlutter
(Flutter初級編) 

 

【体験版講座に含まれるもの】
・約70本・約6時間の動画テキスト
・1つの課題アプリのソースコード
・Flutterアプリを作るための「環境構築ライブサポート(Google Meet)」
(「体験版」は全30時間超の「製品版」の約1/6を抜粋した講座です。「製品版」の詳細はこちらから)

 

【当社公式メルマガご登録6大特典】
blank

\約6時間動画講座を無料プレゼント!/
今すぐ無料体験版に申し込む ▶
無料メルマガ登録で講座割引クーポンなど6大特典ゲット!

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

今すぐプレゼントを受け取る(約6時間のFlutter初級編体験版動画講座を無料でプレゼント)
blank

はじめての方へ

blank
みんプロ式プログラミング講座体系・ラインナップ
みんプロ式プログラミング講座受講の流れ(割引特典利用方法)
サイトマップ(みんプロHPコンテンツ一覧)
運営会社概要

おすすめコンテンツ

プログラミングを学ぶとどんないいことがあるのか
みんプロ式を選んでいただける6つの理由
ぼくの人生挫折ヒストリー(代表者プロフィール)
ぼくのプログラミング挫折ヒストリー(無料メール講座・6大特典付き)
今最も注目のアプリ開発ツール「Flutter(フラッター)」ミニ動画講座

みんプロ作成アプリ

blank
blank
blank
blank
blank

みんプロ式動画講座(コア・Flutter)

ゼロからのFlutter(初級編)-はじめてのプログラミングからアプリリリースまで-
Flutter中級編1-Web通信・設計・状態管理・DIの基礎-
Flutter中級編2-Firebase/地図・カメラ連携等の基礎-
Flutter中級編3-広告/アプリ内課金等の基礎-
Flutter中級編4-Webアプリとレスポンシブデザインの基礎-

みんプロ式動画講座(サテライト)

Flutter/Dartトラブルシューティング・小ネタ集(コア初級編受講で無料プレゼント)
ゼロからのGit・GitHub(コマンドラインツールを極力使わないバージョン管理入門)
Flutter/Dartにおける設計・状態管理・DIの解説集
Dart逆引き大辞典
Flutterにおけるテストの基礎
blank
blank

今すぐプレゼントを受け取る(約6時間のFlutter初級編体験版動画講座を無料でプレゼント)
TOP