🟤
Color Scheme in Flutter
前提
Flutterでアプリ開発を行うとき、ほどんどの場合でマテリアルデザインを採用しているプロジェクトが多いように感じる（実際経験してきたプロジェクトの体感８割はそう）。
なので、Flutterでアプリ開発を行うならマテリアルデザインの知識もあるに越したことはない。
この記事では、とてもざっくりマテリアルデザインの理解を高めるために書きます。
Flutterの話というより、Material Desingの話。
Material Design
概要
- Googleによって開発されたデザイン言語。
- 2014年に初めて発表され、デジタル製品において広く採用されている。
- Material Designの目的は、ユーザーインターフェースを一貫性のある美しいデザインにすることで、直感的で使いやすい体験を提供すること。
Color System について
カラーパレットや、後述の色の役割（Color Roles）などを主要な要素として、UI デザインのための柔軟で一貫性のあるカラーパレットを提供し、アクセシビリティとブランドの識別性を高めることを目指した仕組みのこと。
Color Roles について
色を体系的に整理して、UIデザインの一貫性と視認性を向上させるための定義。
primaryはこの色で、onErrorはこの色で。。。のような一覧定義。
公式サイトでは、以下のような感じで紹介されています。
Color Scheme について
まず、Color Schemeは２種類ある。
Static Color Scheme
概要:
Static Color Schemeは、Baseline colors という静的なカラーパレットを定義し、アプリケーション全体で一貫して使用する。
Dinamic Color Scheme
概要:
Dinamic Color Schemeは、ユーザーの選択やデバイスの設定に基づいてカラーを動的に生成・変更する。
より具体的には、デバイスの壁紙からベースカラーを決めてそれを起点にカラーパレットを生成したり、アプリ内の画像コンテンツの色からウィジェット全体の色を生成したり、とにかく動的に生成・変更できる。
元となる色を取得する方法が2つあり、User-generated colorとContent-based colorがある。
Discussion