💭

【Flutter Widget of the Week #5】Opacityを使ってみた

2022/09/23に公開

Flutter

初心者

opacity

tech

はじめに

Flutter Widget of the Week #5 Opacity についてまとめましたので、紹介します。
https://youtu.be/9hltevOHQBw

Opacityとは

Opacity は Widget のスペースを保持したまま非表示したいときに使う Widget です。
透明度を指定するプロパティである opacity は０〜１の範囲で、0に近いほど透明になり、1に近いほど不透明になります。
また、AnimatedOpacity を使えば表示変化をアニメートすることができます。
以下で実際に使ってみましょう。

3つのボックスのうち真ん中を Opacity にしました。
まず opacity を1にしてみると不透明のため、通常通り表示されます。

次に opacity を0にしてみると、真ん中のボックスだけ透明になります。表示はされてないですが、 Widget としては存在しているためスペースは埋められています。

Opacity のプロパティについて

Opacity のプロパティには opacityの他に alwaysIncludeSemantics があります。

alwaysIncludeSemantics

これは子の semantics（意味）に関する情報を含めるか否かを指定するプロパティです。
デフォルト値は false であり、 true にすると常に semantics を含めた状態にしてくれます。
"常に"なので、opacity が0で透明化し、目に見えないとしても semantics を含めた状態にしてくれるということです。
semantics の有無がわかるように Opacity の子要素に Semantics を入れて確認してみましょう。

main.dart

Opacity(
  opacity: 0.0,
  alwaysIncludeSemantics: true,
  child: Semantics(
    onTap: () {
      print("Opacity ボックス");
    },
    label: 'alwaysIncludeSemantics false', //ここをtrueに変更する
    child: Container(
      padding: const EdgeInsets.all(100),
      child: const Text('Hello Word'),
    ),
  ),
),

alwaysIncludeSemantics が false の場合

semantics が含まれないため何も表示されません。
alwaysIncludeSemantics が false の場合

alwaysIncludeSemantics が true の場合

semantics が含まれているので、その情報が表示されました。
alwaysIncludeSemantics が true の場合

全体のコードはこちらを参照してください。

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      //semantics の確認のためには showSemanticsDebugger を追加する必要があります。
      showSemanticsDebugger: true,
      home: OpacitySample(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.all(50.0),
        child: Center(
          child: Column(
            children: [
              SizedBox(
                width: 300,
                height: 300,
                child: Opacity(
                  opacity: 0.0,
                  alwaysIncludeSemantics: true, //ここを false or true にする
                  child: Semantics(
                    onTap: () {
                      print("Opacity ボックス");
                    },
                    label: 'alwaysIncludeSemantics true',
                    child: Container(
                      padding: const EdgeInsets.all(100),
                      child: const Text('Hello Word'),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

AnimatedOpacity

AnimatedOpacity を使えば表示変化をアニメートすることができます。
ボタンをタップすると透明になったり、不透明になったりと変化するアニメーションを作成して確認してみましょう。

最後に

今回は Opacity を紹介しました。透明・不透明は使う場面がよくありそうです。
個人開発をやるときには取り入れてみようと思います。
次は #6 FutureBuilder です。またお会いしましょう。