FlutterのprimarySwatchに独自の配色を適用する

2019/07/31

Flutterでアプリ全体の配色を変えたいときに手っ取り早いのはThemeDataのprimarySwatchを変える方法です。

Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.lightBlue,
    ),
    home: MyHomePage(title: 'Flutter Demo Home Page'),
  );
}

これでlightBlueを基調とした配色になります。FlutterはMaterial Designに準拠しているので Material Designのcolor system に合わせて細かく設定することもできますが、とりあえずの雰囲気を変えたかったらprimarySwatch だけで十分ですね。

ところで、primarySwatchに指定できるのはMaterialColorだけです。MaterialColorは単色を指すのではなく、Material Designで定義されているパレット（10パターンの色の組み合わせ）を指します。

なので、あらかじめ定義されているMaterialColor以外の色を使いたかったら自前でMaterialColorを定義する必要があります。やり方を確認してみましょう。

はじめにキーになる色を決めます。ここではAndroidのブランドカラーを例に説明します。BrandColorsによるとAndroidのブランドカラーは#A4C639です。

以下のサイトを参考に #A4C639 から10パターンを割り出します。

割り出された10パターンはこんな感じ。

50: #F4F8E7
100: #E4EEC4
200: #D2E39C
300: #BFD774
400: #B2CF57
500: #A4C639
600: #9CC033
700: #92B92C
800: #89B124
900: #78A417

これらを当てはめて独自のMaterialColorを定義します。

const MaterialColor customSwatch = const MaterialColor(
  0xFFA4C639,
  const <int, Color>{
    50: const Color(0xFFF4F8E7),
    100: const Color(0xFFE4EEC4),
    200: const Color(0xFFD2E39C),
    300: const Color(0xFFBFD774),
    400: const Color(0xFFB2CF57),
    500: const Color(0xFFA4C639),
    600: const Color(0xFF9CC033),
    700: const Color(0xFF92B92C),
    800: const Color(0xFF89B124),
    900: const Color(0xFF78A417),
  },
);

あとはprimarySwatchに設定してあげればOKです。

Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: customSwatch,
    ),
    home: MyHomePage(title: 'Flutter Demo Home Page'),
  );
}

参考URL

コメント欄を表示する