FlutterのWidgetではcolor:
やbackgroundcolor:
で色を指定することが多いです。
よくあるのはColors.indigo
みたいにあらかじめ備わっている定数で設定するパターンですが
HTMLのCSSでよくやるように16進で指定することも可能です。
むしろ16進で指定したくなることの方が多いかもしれません。
やり方は以下のように0x
をつけて16進のコードを指定するだけです。
Color(0xFF3F51B5)
最初のFFは透明度の設定で、FFは透過なし。00は透明で見えなくなります。
そのあとにお決まりの16進のコードを書けばOKです。
小文字でも大文字でも大丈夫でした。
サンプルコードは以下です。
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もむしろこっちの書き方になってもいいのではと思えるくらいです。