[Widget]Color Widgetの色を16進で設定する方法

動作環境: Flutter 2.8.1 Dart 2.15.1
LINEでこのページを共有するTwitterでこのページを共有するこのページをはてなブックマークに追加

FlutterのWidgetではcolor:backgroundcolor:で色を指定することが多いです。

よくあるのはColors.indigoみたいにあらかじめ備わっている定数で設定するパターンですが
HTMLのCSSでよくやるように16進で指定することも可能です。

むしろ16進で指定したくなることの方が多いかもしれません。
やり方は以下のように0xをつけて16進のコードを指定するだけです。

Color(0xFF3F51B5)

最初のFFは透明度の設定で、FFは透過なし。00は透明で見えなくなります。
そのあとにお決まりの16進のコードを書けばOKです。
小文字でも大文字でも大丈夫でした。

サンプルコードは以下です。

lib/main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: const Color(0xFFDFF1F0),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
SampleText(
text: '16進で設定した場合',
color: Color(0xFF3F51B5),
),
SampleText(
text: '16進 少し透明にする',
color: Color(0x553F51B5),
),
SampleText(
text: 'RGBで設定した場合',
color: Color.fromRGBO(63, 81, 181, 1.0),
),
SampleText(
text: '定数で設定した場合',
color: Colors.indigo,
),
],
),
),
));
}
}
class SampleText extends StatelessWidget {
const SampleText({Key? key, required this.text, required this.color})
: super(key: key);
final String text;
final Color color;
@override
Widget build(BuildContext context) {
return Text(
text,
style: TextStyle(
color: color,
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
);
}
}

これをビルドするとこんな感じです!
透明度も一緒に設定できるので、慣れてくると楽ですね。
HTMLもむしろこっちの書き方になってもいいのではと思えるくらいです。