FlutterでprimarySwatchをcustomする方法

この記事は、【 可茂IT塾 Advent Calendar 2021 】の15日目の記事です。

Flutterでアプリを作り始めるタイミングで、アプリのテーマカラーの設定がありますよね。
カラー設定の中でも、最も重要なprimarySwatchにcustomしたcolorを設定する方法をご紹介します。

カラー設定なんて簡単でしょ？

色のカスタマイズくらい余裕でできるよ。。って思っている方も多いかもしれません。
しかし、primarySwatchの型はMaterialColorなんです。

デフォルトで設定されているColors.blueの中身は以下のような感じです。

colors.dart

  static const MaterialColor blue = MaterialColor(
    _bluePrimaryValue,
    <int, Color>{
       50: Color(0xFFE3F2FD),
      100: Color(0xFFBBDEFB),
      200: Color(0xFF90CAF9),
      300: Color(0xFF64B5F6),
      400: Color(0xFF42A5F5),
      500: Color(_bluePrimaryValue),
      600: Color(0xFF1E88E5),
      700: Color(0xFF1976D2),
      800: Color(0xFF1565C0),
      900: Color(0xFF0D47A1),
    },
  );

このように50~900のカラーバリエーションがありますね。
MaterialColorに数値を設定することでColorになるのです。
別物なんです..
Colors.blueやColors.greenあたりしか見当たらず。
=> 自分でカスタマイズしたカラーを設定したい！となったわけです。

ColorをMaterialColorに変換するコード

material_color.dart

import 'package:flutter/material.dart';

MaterialColor createMaterialColor(Color color) {
  //渡されたカラーを分解
  final r = color.red;
  final g = color.green;
  final b = color.blue;

  //カラーの濃さのベースをなるリストを作成
  final strengths = <double>[.05];
  final swatch = <int, Color>{};
  for (var i = 1; i < 10; i++) {
    strengths.add(0.1 * i);
  }
  //50~900のカラーパレット(Map)を作成
  for (final strength in strengths) {
    final ds = 0.5 - strength;
    swatch[(strength * 1000).round()] = Color.fromRGBO(
      r + ((ds < 0 ? r : (255 - r)) * ds).round(),
      g + ((ds < 0 ? g : (255 - g)) * ds).round(),
      b + ((ds < 0 ? b : (255 - b)) * ds).round(),
      1,
    );
  }
  return MaterialColor(color.value, swatch);
}

この関数を使えば、MaterialColorも自分の思い通りになります。

最後に

いかがでしたか。
Flutterのカラーテーマの中でも、最も重要と言ってもよいprimarySwatchをcustomする方法をご紹介しました。
参考になれば幸いです。

また、primarySwatchとはなんぞや？というところから学びたいかたは、
以下の記事が大変勉強になります。

参考