【Flutter】IgnorePointerの使い方｜子要素のタッチイベントを無効化

2023年6月26日

Flutterのウィジェット「IgnorePointer」の使い方を紹介します。

「IgnorePointer」を使えば指定したウィジェット(全ての子要素を含む)のタッチイベントを無効化できます。

IgnorePointerの使い方

「IgnorePointer」はタッチイベントを無効化したいウィジェットを「child」でラップして使用します。

「ignoring」の値が「true」の場合はタッチイベントを無効化し、「false」の場合は有効化します。デフォルトは「true」になっています。

...
IgnorePointer(
  ignoring: _ignore,
  child: ElevatedButton(
    child: Text('Click Me'),
    onPressed: () {},
  ),
)
...

下記コードでは「IgnorePointer」の「ignoring」の値に変数「_ignore」を渡し、「ElevatedButton」で変数の値を変化させタッチイベントを制御しています。

class _MyAppState extends State<MyApp> {
  bool _ignore = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _ignore = !_ignore;
                  });
                },
                child: Text(_ignore ? 'Blocked' : 'Allowed'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: _ignore ? Colors.red : Colors.green,
                ),
              ),
              IgnorePointer(
                ignoring: _ignore,
                child: ElevatedButton(
                  child: Text('Click Me'),
                  onPressed: () {},
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

サンプルコード

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _ignore = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _ignore = !_ignore;
                  });
                },
                child: Text(_ignore ? 'Blocked' : 'Allowed'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: _ignore ? Colors.red : Colors.green,
                ),
              ),
              SizedBox(height: 20),
              IgnorePointer(
                ignoring: _ignore,
                child: ElevatedButton(
                  child: Text('Click Me'),
                  onPressed: () {},
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

以上です。

【Flutter】IgnorePointerの使い方｜子要素のタッチイベントを無効化

IgnorePointerの使い方

サンプルコード

合わせて読みたい

参考サイト