導入
こんにちは、もんすんです。
Flutterで個人開発していると、諸々Widgetに色をつける際、ついつい、一つ一つのWidgetにcolorをしてしまいがちですよね。
それでは、統一感のある色が実現できず、配色もまだらなアプリが出来上がってしまいます。
そこで、今回は、ColorSchemeを利用してアプリの配色に統一感を持たせました！
ColorSchemeとは
FlutterのColorSchemeは、アプリ全体のカラーパレットを一元管理するための仕組みです。Material Designのガイドラインに沿った色を提供し、テーマ全体の一貫性を保ちやすくします。
ColorSchemeの基本的な構造
ColorSchemeには、以下のような設定項目があり、それぞれに色を設定することができます。
Primary Colors（主要カラー）
-
primary: アプリやブランドのメインカラーとして利用する -
onPrimary: primary上に表示されるテキストやアイコンの色 -
primaryContainer: primaryの変化版、コンテナや背景に使用 -
onPrimaryContainer: primaryContainer上のテキスト・アイコンの色
Secondary Colors（補助カラー）
-
secondary: 補助的に使われる色 -
onSecondary: secondary上のテキスト・アイコンの色
Error Colors（エラーカラー）
-
error: エラー表示に使われる色 -
onError: エラー背景上のテキスト・アイコンの色
Surface（サーフェス）
-
surface: カードやシートのようなサーフェス用 -
onSurface: サーフェス上のテキスト・アイコンの色
ColorSchemeの実装
fromSeedを用いた例
import 'package:flutter/material.dart';
ColorScheme defaultLightColorScheme = ColorScheme.fromSeed(
seedColor: Colors.blue, // ベースとなる色
brightness: Brightness.light, // ライトテーマ
);
ColorScheme.fromSeedを利用すると、seedColorで指定した色から自動で色の組み合わせを生成してくれます。この際に生成される色の組み合わせは、Material 3というものに準拠したものになっており、アクセシビリティを考慮したカレーパレットが適用されます。
また、brightnessで、ダークテーマかライトテーマかを設定することができます。
これを設定することで、端末の明るさ設定がライトからダークに切り替わったりした際に適用する
ColorSchemeを一から作成する例
import 'package:flutter/material.dart';
ColorScheme defaultColors = ColorScheme.light(
primary: Colors.blue,
onPrimary: Colors.green,
primaryContainer: Colors.blueAccent,
onPrimaryContainer: Colors.greenAccent,
secondary: Colors.yellow,
onSecondary: Colors.black38,
surface: Colors.white12,
onSurface: Colors.pink,
error: Colors.redAccent,
);
こちらは、ColorSchemeのlightメソッド、もしくはdarkメソッド内で、使用する色を設定していくものになります。
fromSeedと異なり、自分でそれぞれの色を設定することが可能です。
fromSeedの欠点としては、自動的にからパレットが決まってしまうことが挙げられますが、こちらでは自分で自由に設定できるというメリットがあります。
一方で、適当に設定してしまうと、アクセシビリティが損なわれます。この上記に示したColorSchemeは適当に作成したので、下の方で、如何に酷いかを示します。
ColorSchemeの呼び出し
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// ここに設定します。
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
上記の場合、seedColorをdeepPurpleにしたアプリケーションとなります。
seedColorをblueに変更すると以下のような色合いになります。
いい感じの配色に簡単に変更できます。
これならデザイン素人のエンジニアでも配色を気にせず、実装できますね。
また、ダークカラー設定や前述したような別ファイルで定義したColorSchemeを利用する場合は、以下のようにMaterialApp内の実装を変更します。
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: defaultColors,
useMaterial3: true,
),
// darkThemeを追加します。
darkTheme: ThemeData(
// ここにダークテーマを設定します。
colorScheme: ColorScheme.dark(
primary: Colors.blue,
... ,
),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
以下では、ColorSchemeに上記で実装した[defaultColors]を適用させたものを示します。
正しく適用されました。
しかし、適当ではやはり色合いは良くなさそうですね。
fromSeedを利用しない場合は、デザイナーのアドバイスがあったほうが良さそうです。
ColorSchemeで指定した色の利用
基本的にTheme.of(context).colorSchemeを指定し、さらにそこから利用するカラーにあたる設定項目を指定します。
Text(
'表示テキスト',
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary,
),
),
これで、このTextの文字色はColorSchemeで設定したonPrimaryの色が適用されます。
終わりに
ColorSchemeを使うことで、Flutterアプリの配色に統一感を持たせることができました。fromSeedで簡単に色を生成する方法と、手動で色を設定する方法の両方を紹介しましたが、目的に応じて使い分けるのがポイントです。デザインの知識がなくてもColorSchemeを活用すれば、見た目の良いアプリを作ることができるので、ぜひ活用してみてください！