【 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)
ディスカッション
コメント一覧
まだ、コメントがありません