【Flutter】Opacityの使い方

---

Opacity

子ウィジェットの透過率を設定するウィジェット。

api.flutter.dev

---

使い方

基本系

Opacity(
  opacity: ... , // 透過率
  child: ... , // 透過率が適用される子ウィジェット
)

• opacity : 0.0 ~ 1.0の間で透過率を指定する。0が完全に透明、1が完全に不透明

例

Opacityを適用前は以下。

Container(
  height: 100,
  color: Colors.red,
),

次にContainerをOpacityでラップする。 opacityプロパティの値ごとの表示は以下。

opacity : 0.0

Opacity(
  opacity: 0.0,
  child: Container(
    height: 100,
    color: Colors.red,
  ),
),

opacity : 0.25

Opacity(
  opacity: 0.25,
  child: Container(
    height: 100,
    color: Colors.red,
  ),
),

opacity : 0.5

Opacity(
  opacity: 0.5,
  child: Container(
    height: 100,
    color: Colors.red,
  ),
),

opacity : 0.75

Opacity(
  opacity: 0.75,
  child: Container(
    height: 100,
    color: Colors.red,
  ),
),

opacity : 1.0

Opacity(
  opacity: 1.0,
  child: Container(
    height: 100,
    color: Colors.red,
  ),
),