【Flutter】primarySwatchの色を動的に変更する方法

０、概要

FlutterアプリのメインカラーはprimarySwatchによって設定されます。
これの変更がプリセットから外れてカラーコードでオリジナル設定しようとすると大変だったので、
記事にしました。

１、失敗例

その前にやってみてダメだった失敗例を記述します。

main.dart

// 大元のコードをpinkとかにする これはOK
primarySwatch: Colors.pink

// pinkが濃かったので[100]などのように薄めてみた　NG
primarySwatch: Colors.pink[100]

// カラーで指定できるのではないかと思い NG
primarySwatch: Colors(0xFFFDFDFD)
=>color is not a subtype of material color

ColorsとMaterial Colorは別物であり、
primemarySwatchにはMaterial Colorを適用しなければならない。とのこと。

２、完成したコード

先に完成形を載せておきます。

main.dart

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  static Map<int, Color> color = {
      50: Color(0xFFFFFBFD),
      100: Color(0xFFFFF4F9),
      200: Color(0xFFFFEDF6),
      300: Color(0xFFFFE5F2),
      400: Color(0xFFFFE0EF),
      500: Color(0xFFFFDAEC),
      600: Color(0xFFFFD6eA),
      700: Color(0xFFFFD0E7),
      800: Color(0xFFFFCBE4),
      900: Color(0xFFFFC2DF),
    };

  final MaterialColor primeColor = MaterialColor(0xFFFFDAEC, color);
  @override
  Widget build(BuildContext context) {
  //  省略   //
  //
  //
    primarySwatch: primeColor,

３、解説

方針: MaterialColorを定義する必要があります。
そのためには、変数で参照されるメインとなる色(500)と10色からなる色定義リストを作成する必要があります。
10色からなる色定義リストはここでは使用しませんが、内部的に参照している箇所があるため、作成して渡さないといけません。

3-1 カラーコードの作成

下記サイトで作成することが可能です。
MATERIAL DESIGN PALETTE GENERATOR
http://mcg.mbitson.com/#!?mcgpalette0=%23ffdaec

アクセスしたら、右上のパレットを押して、完了したらchooseを押します

chooseを押したら、左のクリップボードのようなアイコンを押し、

カラーコードが表示されるので50~900までをコピーします。

3-2、コードにする。

コードにする際に気をつけなければならないのが、
カラーコードの先頭に必ず0xFF(16進数表記の明示)を入れることです。

カラーコードが'FFEDF6'の場合は、
0xFF+FFEDF6でこのような感じになります。

200: Color(0xFFFFEDF6),

また、MaterialColorの第一引数にも入れ忘れないようにしましょう

final MaterialColor primeColor = MaterialColor(0xFFFFDAEC, color);

最後に

これで色を動的に変更することが可能です。
同じように困った人の助けになれば幸いです。
最後まで読んでいただき、ありがとうございました。