【Flutter】Opacity|Widgetの透明度を調整する

今回はOpacity の基本的な使い方を紹介します。

Opacity を使えば指定したWidgetの透明度を子要素も一緒に調整できます。Widgetの透明度をアニメーションで変化させる場合はAnimatedOpacityを使用します。

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

目次

Opacityの使い方

Opacity(
  child: FlutterLogo(
    size: 150,
  ),
  opacity: 0.3,
),

child で透明度を調整したいWidgetを指定しopacity で透明度を指定します。

opacityの引数は0.0で透明、0.5で半透明、1.0で不透明になります。

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

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      height: 150,
      width: 150,
      color: Colors.blue.withOpacity(0.3),
    ),
    SizedBox(
      width: 100,
    ),
    Container(
      height: 150,
      width: 150,
      color: Colors.blue,
    ),
  ],
),

ColorwithOpacityメソッドで透明度を調整することもできます。

一緒に読みたい

参考

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