[Flutter]Flutter Widget of the Week「#21 LayoutBuilder」、「#22 AbsorbPointer」

はじめに
Flutter Widget of the Week
環境
#21 LayoutBuilder
#22 AbsorbPointer
さいごに
おすすめ参考書
リンク

はじめに

前回はFlutter Widget of the Weekの「#18 CustomPaint」、「#19 Tooltip」、「#20 FittedBox」を紹介しました。

今回はその続きで「#21 LayoutBuilder」、「#22 AbsorbPointer」の2つです。

前回の記事はこちら

Flutter Widget of the Week

環境

Flutter 2.8.1

記事にした時点でのバージョンです。GitHubに公開しているのは常に最新の安定版(stable)を使う予定です。

#21 LayoutBuilder

LayoutBuilderとは

ウィジェットのビルド前に画面の有効サイズを知る場合に使うウィジェットです。

変更も検知することができるので、Web画面などで画面サイズが変わった場合や、モバイルで縦横の回転が発生したときに特に役立ちます。

サンプルコード

import 'package:flutter/material.dart';

class SamplePage021 extends StatelessWidget {
  const SamplePage021({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('LayoutBuilder'),
      ),
      body: SafeArea(
        child: LayoutBuilder(builder: (context, constrains) {
          if (constrains.maxWidth > 400) {
            return const Center(
              child: Text(
                'maxWidth > 400',
                style: TextStyle(color: Colors.red),
              ),
            );
          } else {
            return const Center(
              child: Text(
                'maxWidth >= 400',
                style: TextStyle(color: Colors.blue),
              ),
            );
          }
        }),
      ),
    );
  }
}

結果

画面が縦の時はこんな感じですが、

画面を横にすると表示が切り替わります。

動画

公式リファレンス

LayoutBuilder class - widgets library - Dart API

API docs for the LayoutBuilder class from the widgets library, for the Dart programming language.

#22 AbsorbPointer

AbsorbPointerとは

複数のボタンなどのタッチイベントを一括で無効にしてくれるウィジェットです。

サンプルコード

import 'package:flutter/material.dart';

class SamplePage022 extends StatefulWidget {
  const SamplePage022({
    Key? key,
  }) : super(key: key);

  @override
  _SamplePage022State createState() => _SamplePage022State();
}

class _SamplePage022State extends State<SamplePage022> {
  bool _absorbing = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AbsorbPointer'),
      ),
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('押せる'),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                _SamplePage022IconButton(
                  onPressed: () {},
                ),
                _SamplePage022IconButton(
                  onPressed: () {},
                ),
              ],
            ),
            _absorbing ? const Text('押せない') : const Text('押せる'),
            AbsorbPointer(
              absorbing: _absorbing,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  _SamplePage022IconButton(
                    onPressed: () {},
                    color: Colors.red,
                  ),
                  _SamplePage022IconButton(
                    onPressed: () {},
                    color: Colors.red,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _absorbing = !_absorbing;
          });
        },
        child: const Icon(Icons.change_circle),
      ),
    );
  }
}

class _SamplePage022IconButton extends StatelessWidget {
  const _SamplePage022IconButton({
    Key? key,
    required this.onPressed,
    this.color = Colors.blue,
  }) : super(key: key);

  final void Function()? onPressed;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return IconButton(
      onPressed: onPressed,
      icon: Icon(
        Icons.catching_pokemon,
        color: color,
      ),
    );
  }
}