【Flutter】色を指定する方法

2022.12.18

この記事は、Gajeroll Advent Calendar 2022 の18日目の記事です。

今回は、Flutterで開発する際に、Dartファイル内で色を指定する方法を紹介します。

準備

まず、始めにmaterial.dartをimportしましょう。

import 'package:flutter/material.dart';

importする、というのは、.dartファイル内の最初の部分にimport '...';のような文を記述することです。上のコードが書かれていない場合は、コピーして.dartファイルの1行目に追加すればOKです。

名前のついている色は、Colors.blueのように指定することができます。

color: Colors.blue,

ただし、Colors.blueは原色の青ではないことに注意してください。 redやgreenなども同様に原色にはなりません。

完全な透明にしたい場合はColors.transparentを指定しましょう。

数値で細かく指定したい場合は、Color(<整数>)のように指定することができます。

例えば、（原色の）青は

color: Color(0xff0000ff),

のように指定します。

上のコードは、Color(<整数>)のように設定されているのですが、0xff0000ffのどこが整数なの？？という感じかも知れません。

下のように分けてみるとわかりやすくなります。

0x     ff     00   00     ff
16進数  透過度  Red  Green  Blue

先頭の0xは、「16進数で書きますよ」ということを示しています。

この後に書かれた数字（16進数）が、実際に色を指定する部分です。

ff：透過度（アルファ値、Alpha） 00なら無色透明、ffなら続くRGBで指定した通りの色になる。

00：赤（Red）赤の成分をどれだけ強くするかを示す。

00：緑（Green）緑の成分をどれだけ強くするかを示す。

ff：青（Blue）青の成分をどれだけ強くするかを示す。

ちなみにColor()の引数は整数であり、16進数である必要はないので、10進数で指定することもできます。

例えば、0xff0000ffは10進数では4278190335なので、Color(4278190335)と書いても問題ありません。

無色透明はColor(0)と指定することもできます。白は0xffffffffを10進数に変換すればよいので、Color(4294967295)となります。

16進数のffのような書き方よりも、10進数の255のような書き方の方が良い、という場合は、次のColor.fromARGB()で指定するのが良いでしょう。

これは、先ほどのColor()を、Alpha、Red、Green、Blueの4つに分割して指定

できるものです。

例えば、（原色の）青は

color: Color.fromARGB(255, 0, 0, 255),

のように指定します。

ちなみに、これは10進数にしなければならないという制約はないので、16進数で指定することもできます。

color: Color.fromARGB(0xff, 0x0, 0x0, 0xff),

ただ、これを使うならColor()で指定する方が楽です。

CSSのrgba()のように、不透明度を最後に設定したい！という場合は、Color.fromRGBO()を使いましょう。

例えば、（原色の）青は

color: Color.fromRGBO(0, 0, 255, 1),

と指定します。

4つ目のopacity（不透明度）は、0から1の小数で指定しましょう。 0なら透明、1ならRGBで指定した通りの色になります。

CSSに慣れている方にはわかりやすい書き方だと思います。

さらに詳しく知りたい方は、以下のページをご覧ください。

最後までご覧いただきありがとうございます。 PCロールでは、テクノロジーに関する情報をまとめて発信しています。また、おすすめのガジェットについて幅広く紹介していく、ガジェロールもあります。ガジェットやソフトを使うエンジニア・クリエイターはぜひご覧ください。