【Flutter】テーマカラーを一括変更！ColorSchemeを設定する

ColorScheme(カラースキーム)とは？
テーマカラーの配色例
解説
brightness
primary
onPrimary
secondary
onSecondary
error
onError
background
onBackground
surface
onSurface
【使用例】別ファイルで色を管理する
まとめ

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,
---------
以下略

このようにテーマカラーの項目が一行で終わるのでコードがスッキリします。