【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part99 Interaction model widgets

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part99 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part98 Interaction model widgets

引き続き、Interaction model widgetsについて学びます。

Interaction model widgets

AbsorbPointerウィジェット

だいたいのウィジェットではonPressed: nullで入力を無効にできます。
たくさんのウィジェットがある場合、ひとつひとつonPressed: nullを実装するのはとても大変です。

AbsorbPointerウィジェットはウィジェットをまとめて無効に設定することができるウィジェットです。

Absorbは日本語で「吸収」という意味です。

absorbingプロパティ

absorbingプロパティがtrueの場合、childに指定されたウィジェットはすべて無効になります。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  // runApp(new MaterialApp(home: new MyApp()));
  runApp(new MaterialApp(home: new SamplePage()));
}

class SamplePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SamplePageState();
  }
}

class _SamplePageState extends State<SamplePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('テスト中!')),
        body: Stack(
          alignment: AlignmentDirectional.center,
          children: <Widget>[
            SizedBox(
              width: 200.0,
              height: 100.0,
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  primary: Colors.greenAccent.shade700,
                ),
                onPressed: () {
                  print('普通のボタンです。');
                },
                child: null,
              ),
            ),
            SizedBox(
              width: 100.0,
              height: 200.0,
              child: AbsorbPointer(
                absorbing: true,
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    primary: Colors.blue.shade200,
                  ),
                  onPressed: () {
                    print('AbsorbPointer配下のボタンです。');
                  },
                  child: null,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

青色のボタンが無効になっているのがわかります。

最後に

作成したサンプルではあまり威力がわからないかもしれませんがchildプロパティ配下のウィジェットがまとえて無効になるのはすごい!
実際にはAbsorbPointerウィジェットという「見えない壁」みたいなものがchildウィジェットの前面に出てきてchild配下のウィジェットが無効になっているように見える・・・。
という仕組みである気がしますね。面白い😄

ignoringSemanticsプロパティを使えばスクリーンリーダーの無効化も行えるようです。
スクリーンリーダー???・・・。

今日はここまで!

参考

AbsorbPointer class – widgets library – Dart API (flutter.dev)