[Flutter] Colorについて（2／2）
勉強の記録を残していく記事です。
Flutter を始めたばかりの人でもわかりやすい記事にするために、動画や画像を使って解説しています。
[Flutter] Colorについて（１／2）では、"Colors"について書きました。
この回では"Color"について書いていきます。
色を決める
color: Color(0xFF03A9F4),Color でよく使われるのが、上のコード例の形だと思います。
"0x"で始まり、"FF"が不透明度を表し、
その後に "色ごとの６桁のコード" が続き、色を指定します。
この６桁のコードのことをカラーコードと呼びます。
カラーコードを探す場合は、このサイトが使いやすいです。
色をクリックすると、カラーコードがクリップボードにコピーされるので、
便利です。
カラーコードは、赤色、緑色、青色をそれぞれ１６進法で表したものです。
なぜ、このようなコードになるのか知りたい方は、こちらのサイトなどを
参照してみてください。
"Color" のプロパティ
fromARGB :
Color.fromARGB(int a, int r, int g, int b) （アルファ値、赤色、緑色、青色）それぞれを、0 〜 255 の整数値で指定して、色を決める。
アルファ値は、不透明度を決める値で、0 は透明。255 は完全に不透明になる。
fromRGBO :
Color.fromRGBO(int r, int g, int b, double opacity)（赤色、緑色、青色、不透明度）を、色は 0 〜 255 の整数値で、
不透明度は、0 〜 1.0 の値で、色を決める。
lerp :
Linear interpolationの略と書かれていることが多い、意味は線形補間。
ある２種類の色が、徐々に混ざっていくアニメーションを使いたいときなどに使えるプロパティです。
Color.lerp(Color a, Color b, double t)「 a と b の色を t の割合で混ぜる 」という風に理解しています。
Color.lerp(Colors.red, Colors.white, t)上のコード例では、start を"Colors.red"、end を"Colors.white"に指定し、
t の値を増やしていくと、白色の割合が増えていくのがわかると思います。
なので、t = 0.5 のときにピンク色になってますね。
［上のGIFのコード］
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Text('Flutter',
style: TextStyle(fontSize: 50.0, color: Colors.white)),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color.lerp(Colors.red, Colors.white, t),
),
width: 250.0,
height: 250.0,
),
SizedBox(height: 8.0),
Slider(
value: t,
min: 0.0,
max: 1.0,
onChanged: (value) {
setState(() {
t = value;
});
}),
Text(
"t：${t.toStringAsFixed(1)}",
style: TextStyle(fontSize: 30.0),
)
],
),＜参考にしたサイト＞
この記事が気に入ったらサポートをしてみませんか？