【Flutter】ColorsとColorの違い|色の指定方法

今回はFlutterで色を指定できるColorsColorの違いについて紹介します。

結論としてはColorsではマテリアルデザインの既存カラーパレットから色を使用できるのに対し、Colorでは16進数またはRGBカラーコードで好きな色を自分で作れます。

\ 世界最大級のオンライン学習サービス /

目次

ColorsとColorの違い

  • Colors:materialライブラリ
  • Color:dart:uiライブラリ

Colorはdart:uiライブラリのWidgetであるのに対しColorsはmaterialライブラリのWidgetです。

Colorsは既存カラーパレットから色を指定できる

ColorsではMaterial Designのカラーシステムによって作られたカラーパレットを使用できます。

カラーコードを自分で作る必要がないので手軽に色を生成できます。

Colorは自分が好きな色を作れる

Colorでは自分が好きな色をRGBや16進数カラーコードで生成できます。

使用するカラーコードによってコンストラクタの使い分けが必要となります。

Colorsの使い方

//テーマ色
Colors.pink

//色の濃さを指定
Colors.pink[200] または Colors.pink.shade200

Colorsで色を指定する方法は上記の3つです。

Colors.pinkでピンク色のテーマ色を指定でき、他の2つはマテリアルデザインで用意されたパレットから好きな色の濃さを指定できます。

Colors.pink[200]Colors.pink.shade200はどちらも同じ色になります。

Colorの使い方

//16進数カラーコード
Color(0xFF07c1fa)

//RGBカラーコード
Color.fromRGBO(0, 153, 255, 1)
Color.fromARGB(255, 0, 153, 255)

Colorでは16進数またはRGBカラーコードで自分の好きな色を指定できます。

16進数カラーコードの場合はColorの引数に「#」を「0xFF」と入れ替えたカラーコードを渡し、RGBの場合はfromRGBOまたはfromARGBコンストラクタを使用します。

サンプルコード

Column(
  children: [
    ListTile(
      title: Text('Colors.pink'),
      tileColor: Colors.pink,
    ),
    ListTile(
      title: Text('Colors.pink.shade50'),
      tileColor: Colors.pink.shade50,
    ),
    ListTile(
      title: Text('Colors.pink.shade100'),
      tileColor: Colors.pink.shade100,
    ),
    ListTile(
      title: Text('Colors.pink.shade200'),
      tileColor: Colors.pink.shade200,
    ),
    ListTile(
      title: Text('Colors.pink.shade300'),
      tileColor: Colors.pink.shade300,
    ),
    ListTile(
      title: Text('Colors.pink.shade400'),
      tileColor: Colors.pink.shade400,
    ),
    ListTile(
      title: Text('Colors.pink.shade500'),
      tileColor: Colors.pink.shade500,
    ),
    ListTile(
      title: Text('Colors.pink.shade600'),
      tileColor: Colors.pink.shade600,
    ),
    ListTile(
      title: Text('Colors.pink.shade700'),
      tileColor: Colors.pink.shade700,
    ),
    ListTile(
      title: Text('Colors.pink.shade800'),
      tileColor: Colors.pink.shade800,
    ),
    ListTile(
      title: Text('Colors.pink.shade900'),
      tileColor: Colors.pink.shade900,
    ),
  ],
),

一緒に読みたい

参考

  • URLをコピーしました!
目次