The application is designed to display a dynamic seating map for restaurant table reservations. Actual rendering area seems to be limited to 300 pixels. This is preventing the full map from being displayed correctly.

Example of the problem

Mesa 50: Coordinates x:332, y:0
Mesa 12: x:332 y:332

Mesa 32: x:249 y:498

On the right side you can notice the cut in the table right in the middle, as for the Y axis I estimate that the limitation is around 500 pixels.

Increasing boundaryMargin:

Attempted to increase the boundaryMargin property of InteractiveViewer to extend the interactive area.
This approach did not resolve the issue as the rendering area still remained limited to 300 pixels.

Testing with SizedBox and Overflow:

Attempted to use a SizedBox with a fixed height and width to constrain the area of the InteractiveViewer.

Using Container with Constraints:
Tried wrapping InteractiveViewer in a Container with fixed constraints to control the renderable area.
Faced limitations as the container also restricted the area to 300 pixels, similar to previous attempts.

How can I extend the rendering area of InteractiveViewer beyond 300 pixels?
Are there alternative approaches or best practices to achieve the desired functionality?

Here is my code:

@override
  Widget build(BuildContext context) {
    if (mesas.isEmpty) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('Mapa de Mesas'),
        ),
        body: const Center(child: Text('No hay mesas disponibles.')),
      );
    }
    return Scaffold(
      appBar: AppBar(
        title: const Text('Mapa de Mesas'),
      ),
      body: InteractiveViewer(
        panEnabled: true,
        boundaryMargin: const EdgeInsets.all(150),
        minScale: 0.5,
        maxScale: 4.0,
          child: Stack(
            children: mesas.map((mesa) {
              return Positioned(
                left: mesa.x,
                top: mesa.y,
                child: GestureDetector(
                  onTap: () => _onMesaTap(mesas.indexOf(mesa)),
                  onLongPress: () => _onMesaLongPress(mesas.indexOf(mesa)),
                  child: Transform.rotate(
                    angle: mesa.rotation,
                    child: Container(
                      width: mesa.width,
                      height: mesa.height,
                      color: mesa.reservada ? Colors.red : Colors.green,
                      child: Center(
                        child: Text('Mesa ${mesa.id}'),
                      ),
                    ),
                  ),
                ),
              );
            }).toList(),
          ),
        ),
      );
  }