OverflowBoxにGestureDetectorが反応しない

Question

実現したいこと

OverflowBoxで表示した部分(青い四角形)上でGestureDetectorのタップイベントを取得したいのですが、反応しません。
解決策が検討つかない為、何かアドバイスを頂ければと思い投稿しました。

目的は、はみ出た部分でGestureDetectorイベントを取得したいことなので、OverflowBoxでなくとも同じようなレイアウトが出来れば良いです。
どうぞよろしくお願い致します。

ソースコード

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: GestureDetector(
          onTap: () {
            print('TAP!!!!!');
          },
          child: Container(
            width: 200,
            height: 200,
            color: Colors.green,
            child: Align(
              alignment: const Alignment(1, 1),
              child: SizedBox(
                width: 10,
                height: 20,
                child: OverflowBox(
                  maxWidth: 300,
                  maxHeight: 300,
                  child: Container(
                    color: Colors.blue,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

補足情報

Flutter bata 1.20.0-7.2.pre
Dart 2.9.0 (build 2.9.0-21.2.beta)

Answer 1

GestureDetectorは自身や親の領域からはみ出ている部分を検出することはできません。
これはissueにも多くの人が問い合わせていますが、唯一の解決策は「親の領域を大きくする」ことです。
https://github.com/flutter/flutter/issues/25702
https://github.com/flutter/flutter/issues/27587

今回の場合は下記のような方法で対応出来るかと思います。
（Safeareaの中心ではないので元の配置と微妙に違いますが、計算でなんとかなるので後は頑張ってください笑）

    return SafeArea(
      child: Stack(
        children: <Widget>[
          Positioned(
            left: MediaQuery.of(context).size.width / 2 - (200 / 2),
            top: MediaQuery.of(context).size.height / 2 - (200 / 2),
            child: Container(            
              width: 200,
              height: 200,
              color: Colors.green,
            )
          ),
          Positioned(
            left: MediaQuery.of(context).size.width / 2 - (300 / 2) + 95,
            top: MediaQuery.of(context).size.height / 2 - (300 / 2) + 90,
            child: Container(      
              width: 300,
              height: 300,
              color: Colors.blue,
              child: GestureDetector(
                onTap: () {
                  print('TAP!!!!!');
                },
              )
            )
          )
        ]
      ),
    );

Comments

[grief137]

早急なご回答ありがとうございます。
なるほど、OverflowBoxの領域がGestureDetectorで囲った領域(緑の四角形)から外れている為なのですね。