【Flutter Widget of the Week #22】AbsorbPointerを使ってみた

はじめに

Flutter Widget of the Week #22 AbsorbPointer についてまとめましたので、紹介します。
https://youtu.be/65HoWqBboI8

AbsorbPointer

大抵の widget には入力を無効にする方法があります。
例えば、RaisedButton は onPressed に null を指定すると ボタンが無効されます。

RaisedButton(
  color: Colors.blue,
  child: Text('Click me!'),
  onPressed: null, // ← null を指定
)

また、ListView は physics プロパティに NeverScrollableScrollPhysics を指定することで、ユーザーがドラッグしたときに、スクロールしないようにできます。

ListView(
  // NeverScrollableScrollPhysics を指定
  physics: NeverScrollableScrollPhysics(),
  children: [
       ・・・
  ],
)

このように、一つ一つの widget に対して、タッチイベントを無効化することはできます。
しかし、 widgetツリーが複雑になったときにも、個々に widget の設定を行うのは面倒です。
そんな場合、AbsorbPointer が効果的です。
では、さっそくサンプルを動かして使い方を見てみましょう。

AbsorbPointer サンプルコード

AbsorbPointer サンプル実行画面

サンプルコード全体

main.dart

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Stack(
        alignment: AlignmentDirectional.center,
        children: <Widget>[
          SizedBox(
            width: 200.0,
            height: 100.0,
            child: ElevatedButton(
              onPressed: () {},
              child: null,
            ),
          ),
          SizedBox(
            width: 100.0,
            height: 200.0,
	    // AbsorbPointer でラップする
            child: AbsorbPointer(
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.blue.shade200,
                ),
                onPressed: () {},
                child: null,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

使い方としては、
タッチイベントを無効化したい widgetツリーを AbsorbPointer でラップするだけ。
サンプルコードだと、ElevatedButton を AbsorbPointer でラップすることで、ElevatedButton のタッチイベントを無効化しています。

AbsorbPointer(
  child: ElevatedButton(
    style: ElevatedButton.styleFrom(
      backgroundColor: Colors.blue.shade200,
    ),
    onPressed: () {},
    child: null,
  ),
),

AbsorbPointer のプロパティについて

AbsorbPointer にはプロパティがいくつかありますので、紹介します。

(new) AbsorbPointer AbsorbPointer({
  Key? key,
  bool absorbing = true,
  Widget? child,
  bool? ignoringSemantics,
})

①absorbing

タッチイベントを無効化するかを指定する
デフォルトは true
型は bool 型

②ignoringSemantics

Semanticsツリーをコンパイルする際、その widget の Semantics を無視するかどうかを指定する
この設定によって、スクリーンリーダーなどの機能を有効にするか無効にするかが決まります。
型は bool 型

最後に

今回は AbsorbPointer を紹介しました。widgetツリーをラップするだけで、widget の設定がまとめてできるのはすごく楽になって便利ですね。使い方も簡単なので、是非使ってみてください。
次は #23 Transform です。またお会いしましょう。

参考記事

https://api.flutter.dev/flutter/widgets/AbsorbPointer-class.html
https://api.flutter.dev/flutter/widgets/NeverScrollableScrollPhysics-class.html