【Flutter】ColorでRGBの色を表示・透明度調整

今回はFlutterでRGBで色を指定する方法を紹介します。

RGBとはRed(赤)、Green(緑)、Blue(青)で構成された色です。FlutterではColorfromRGBOまたはfromARGBコンストラクタでRGBカラーを指定できます。

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

目次

RGBカラーの表示

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(
      height: 200,
      width: 200,
      color: Color.fromRGBO(0, 153, 255, 1),
    ),
    Container(
      height: 200,
      width: 200,
      color: Color.fromARGB(255, 0, 153, 255),
    ),
  ],
),

ColorでRGBカラーを表示するにはfromRGBOまたはfromARGBのいずれかを使用できます。

fromRGBOの場合は「r, g, b, opacity(透明度)」、fromARGBの場合は「alpha(透明度), r, g, b」でRGBカラーを指定します。

fromRGBOでは透明度を0.0(透明)から1.0(不透明)の間で指定できるのに対し、fromARGBでは0.0から255の間で指定するのでfromRGBOの方が使い勝手が良いと思われます。

Opacityでは子要素も一緒に透明度を調整できる

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

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

Opacityで透明度調整

fromRGBOで透明度調整

サンプルコード

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: Opacity(
            opacity: 0.3,
            child: Container(
              height: 200,
              width: 200,
              color: Color.fromRGBO(0, 153, 255, 1),
              child: Icon(
                Icons.abc,
                size: 200,
                color: Colors.red,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

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