flutter - Widgets in the overflowed area of a stack are not functional

Question

In Flutter, I'm trying to create a screen that contains a stack that is in an InteractiveViewer and contains more than a one Positioned widget. But the Positioned widgets which are placed out of screen boundaries are visible but not functional. I wrapped each Positioned widget with an InkWell to give them functionality. But the widgets out of screen boundaries are not clickable.

Below you can find my code and the result. I tried to keep sample code as much as simple.

It behaves as I expected, except for the green positioned widget. Since it is out of boundaries, it is not clickable.

Anyone who can help to figure out this problem? Thanks.

import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart' as vector;

class Zoomable extends StatefulWidget {
  @override
  _ZoomableState createState() => _ZoomableState();
}

class _ZoomableState extends State<Zoomable> {
  final TransformationController controller = TransformationController();
  int a = 0;
  int b = 0;
  int c = 0;
  double r;
  Matrix4 original;

  @override
  void initState() {
    super.initState();
    r = 1;
    original = Matrix4.diagonal3(vector.Vector3(r, r, r));
    controller.value = original;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.pink[100],
        body: Column(
          children: [
            Expanded(
              child: InteractiveViewer(
                minScale: 0.1,
                maxScale: 5.0,
                panEnabled: true,
                transformationController: controller,
                boundaryMargin: const EdgeInsets.all(double.infinity),
                child: Container(
                  color: Colors.black45,
                  child: Stack(
                    overflow: Overflow.visible,
                    children: [
                      Positioned(
                        left: 30,
                        top: 45,
                        child: InkWell(
                          onTap: () {
                            setState(() {
                              a++;
                            });
                          },
                          child: Container(
                            width: 50,
                            height: 50,
                            color: Colors.blue,
                            child: Text(
                              '$a',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 25,
                              ),
                            ),
                            alignment: Alignment.center,
                          ),
                        ),
                      ),
                      Positioned(
                        left: 19,
                        top: 180,
                        child: InkWell(
                          onTap: () {
                            setState(() {
                              b++;
                            });
                          },
                          child: Container(
                            width: 120,
                            height: 40,
                            color: Colors.red,
                            child: Text(
                              '$b',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 25,
                              ),
                            ),
                            alignment: Alignment.center,
                          ),
                        ),
                      ),
                      Positioned(
                        left: 419,
                        top: 380,
                        child: InkWell(
                          onTap: () {
                            setState(() {
                              c++;
                            });
                          },
                          child: Container(
                            width: 220,
                            height: 80,
                            color: Colors.green,
                            child: Text(
                              '$c',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 25,
                              ),
                            ),
                            alignment: Alignment.center,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

And here is the result

question from:https://stackoverflow.com/questions/66063171/widgets-in-the-overflowed-area-of-a-stack-are-not-functional

Answer 1

Waitting for answers