【Flutter】Colorで16進数カラーコードの色を表示・透明度調整

今回はFlutterで16進数カラーコードで色を指定する方法を紹介します。

16進数カラーコードとはCSSなどで良く使用される「#○○○○○○」のことです。FlutterではColorで16進数カラーコードを使用できます。また色を透過させる方法についても紹介していきます。

\ 世界最大級のオンライン学習サービス /

目次

16進数カラーの表示

Container(
  height: 200,
  width: 200,
  color: Color(0xFF07c1fa),
),

16進数カラーコードを使用するにはColorを使用します。

上記コードのようにColorの引数に16進数カラーコードを渡す際「#」を「0xFF」と入れ替えます。今回使用する16進数カラーコードは「#07c1fa」です。

16進数カラーを透過させる(透明度調整)

Container(
  height: 200,
  width: 200,
  color: Color(0xFF07c1fa).withOpacity(0.3),
),

Colorで指定した色の透明度を調整するにはwithOpacityを使用します。

withOpacityの引数に透明度となる値(0.0で完全透明、1.0がデフォルト色)を渡します。

透明度はOpacityでも調整できる

Opacity(
  opacity: 0.3,
  child: Container(
    height: 200,
    width: 200,
    color: Color(0xFF07c1fa),
    child: Icon(
      Icons.abc,
      size: 200,
      color: Colors.red,
    ),
  ),
),

Opacityを使えば子要素のWidgetの透明度も一緒に調整できます。

Opacityで透明度調整

withOpacityで透明度調整

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('FlutterZero')),
        body: Center(
          child: Container(
            height: 200,
            width: 200,
            color: Color(0xFF07c1fa).withOpacity(0.3),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次