【Flutter】 色を指定する方法
この記事は、Gajeroll Advent Calendar 2022 の 18 日目の記事です。
今回は、Flutter で開発する際に、Dart ファイル内で色を指定する方法を紹介します。
準備
まず、始めにmaterial.dartを import しましょう。
import 'package:flutter/material.dart';
importする、というのは、.dartファイル内の最初の部分にimport '...';のような文を記述することです。
上のコードが書かれていない場合は、コピーして.dartファイルの 1 行目に追加すれば OK です。
Colors.<色の名前>で指定
名前のついている色は、Colors.blueのように指定することができます。
color: Colors.blue,
ただし、Colors.blueは原色の青ではないことに注意してください。
redやgreenなども同様に原色にはなりません。
完全な透明にしたい場合はColors.transparentを指定しましょう。
Color()で指定
数値で細かく指定したい場合は、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.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.fromRGBO()で指定
例えば、（原色の）青は
color: Color.fromRGBO(0, 0, 255, 1),
と指定します。
4 つ目の opacity（不透明度）は、0から1の小数で指定しましょう。
0なら透明、1なら RGB で指定した通りの色になります。
CSS に慣れている方にはわかりやすい書き方だと思います。
もっと詳しく
さらに詳しく知りたい方は、以下のページをご覧ください。
Flutter Color Class Documentation
Flutter Colors Class Documentation
最後までご覧いただきありがとうございます。 PC ロールでは、テクノロジーに関する情報をまとめて発信しています。 また、おすすめのガジェットについて幅広く紹介していく、ガジェロールもあります。 ガジェットやソフトを使うエンジニア・クリエイターはぜひご覧ください。