ColorScheme(カラースキーム)とは?
各ウィジェットの配色の設定ができるクラスです。
Flutterではテーマクラスを使ってアプリのテーマカラーを一括で設定することができます。
また、ウィジェットプロパティを使用してウィジェットごとに設定することもできます。
テーマカラーの配色例
まずはColorSchemeを設定してみましょう。
theme: ThemeData(
colorScheme: const ColorScheme(
brightness: Brightness.light,
primary: Colors.deepPurple,
onPrimary: Colors.yellowAccent,
secondary: Colors.orange,
onSecondary: Colors.brown,
error: Colors.red,
onError: Colors.white,
background: Colors.limeAccent,
onBackground: Color.fromARGB(255, 240, 105, 188),
surface: Colors.yellow,
onSurface: Colors.green
),
),
ちなみに初期設定(MaterialColor)だとこのような配色になっています。
アクセントカラー含めて含めて3~4色でまとまっています。
解説
以下11項目が設定必須となります。
書き忘れるとエラーが出るので気をつけましょう。
brightness
brightness: Brightness.light
明るさのプロパティです。
Brightness.light=昼間 Brightness.dark=夜間
primary
primary: Colors.deepPurple
アプリの画面とコンポーネント全体で最も頻繁に表示される色
ウィジェットの上に表示される文字色などに該当します。
onPrimary
onPrimary: Colors.yellowAccent
Primaryとセットと考える色
ここではFilledButtonの文字色になっています。
secondary
secondary: Colors.orange
アクセントカラー(強調色)になります。
onSecondary
onSecondary: Colors.brown
secondaryとセットで考える色
ここではFilledButton.tonalの文字色になっています。
error
error: Colors.red,
入力検証エラーに使用する色
エラーテキストに使われる色です。
onError
onError: Colors.white
errorとセットで考える色
background
background: Colors.limeAccent
画面全体の背景色
onBackground
onBackground: Color.fromARGB(255, 240, 105, 188)
[背景]に描かれたときにはっきりと判読できる色
アウトライン、例えばTextFieldやOutlinedButtonの枠線に使用されます。
surface
surface: Colors.yellow
ウィジェットの背景色
AppBerやElevatedButtonなどに使われます。
onSurface
onSurface: Colors.green
基本の文字色
【使用例】別ファイルで色を管理する
カラースキームのコードを書くとソースコードが長くて見辛くなってしまします。
そんな時はファイルを別々で分けることによってメインのソースコードを見やすくすることができます。
【colors.dart】
final sampleTheme = ThemeData(
colorScheme: const ColorScheme(
--------
中略
--------
);
【main.dart】
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
// 自作テーマを適用
theme: sampleTheme,
---------
以下略
このようにテーマカラーの項目が一行で終わるのでコードがスッキリします。
まとめ
●ColorSchemeを使うとテーマカラー、ウィジェットカラーの一括設定ができる
●ColorSchemeでは11項目が設定必須となっている
いかがだったでしょうか?
ご意見、ご感想ありましたらお気軽にコメントしてください。
【参考文献】
コメント