【Flutter】Colors/Colorの色を半透明化(透過)させる

2023年7月15日

FlutterでColorsまたはColorで指定した色を半透明化（透過）させる方法を紹介します。

色を半透明化させるには、固有メソッドまたはOpacityを使用する方法などがあります。

Colorsで指定した色を半透明化させる

Colorsで指定した色を半透明化（透過）させるにはwithOpacity()またはwithAlpha()を使用できます。

withOpacity()で透明度を調整する場合は、引数にdouble値を渡し「0」から「1」の範囲で透明度を指定します。値が「0」の場合は透明、「1」の場合は不透明になります。

withAlpha()で透明度を調整する場合は、引数にint値を渡し「0」から「255」の範囲で透明度を指定します。値が「0」の場合は透明、「255」の場合は不透明になります。

Container(
  color: Colors.amber.withOpacity(0.5),
)

//または

Container(
  color: Colors.amber.withAlpha(127),
)

Colorで指定した色を半透明化させる

16進数のカラーコードの場合

Color(0xFFFDDE81)のようにカラーコードを半透明化（透過）させる場合には、先ほどと同様withOpacity()またはwithAlpha()を使用できます。

Container(
  color: Color(0xFFFDDE81).withOpacity(0.5),
)

//または

Container(
  color: Colors.amber.withAlpha(127),
)

RGB値の場合

RGB値で指定した色を半透明化させるにはfromRGBO()またはfromARGB()を使用できます。

fromRGBO()を使用する場合はColor.fromRGBO(赤, 緑, 青, Opacity)のように書きます。Opacityの範囲はdouble値の「0」から「1」です。

fromARGB()を使用する場合はColor.fromRGBO(Alpha, 赤, 緑, 青)のように書きます。Alphaの範囲はint値の「0」から「255」です。

Container(
  color: Color.fromRGBO(253, 222, 129, 0.5),
)

//または

Container(
  color: Color.fromARGB(126, 253, 222, 129),
)

Opacityで半透明化させる

ColorやColorsで指定した色はOpacityウィジェットを使用して透過させることもできます。

Opacity(
  opacity: 0.5,
  child: Container(
    color: Colors.amber,
    height: 200,
    width: 300,
  ),
),

サンプルコード

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              child: Text('Colors.amber[50]'),
              color: Colors.amber[50],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[100]'),
              color: Colors.amber[100],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[200]'),
              color: Colors.amber[200],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[300]'),
              color: Colors.amber[300],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[400]'),
              color: Colors.amber[400],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[500]'),
              color: Colors.amber[500],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[600]'),
              color: Colors.amber[600],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[700]'),
              color: Colors.amber[700],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[800]'),
              color: Colors.amber[800],
              height: 50,
              width: double.infinity,
            ),
            Container(
              child: Text('Colors.amber[900]'),
              color: Colors.amber[900],
              height: 50,
              width: double.infinity,
            ),
          ],
        ),
      ),
    );
  }
}

以上です。