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 だけで十分ですね。

Colors.lightBlueを指定

Colors.lightBlueを指定

ところで、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'),
  );
}
独自のMaterialColorを指定

独自のMaterialColorを指定

参考URL




関連(するかもしれない)記事


おススメ