In my Flutter Desktop application, I have a container somewhere in the middle of the application layout in which I'm trying to draw rectangles over an image that could be displayed full height or full width.

I managed to do it by combining a FittedBox over a stack that contains the image and another container over it in which I can draw the rectangles (using TransformBox library for the rectangles). The problem I'm facing, is that my rectangles are clipped on the limits of the image and in fact I would like to be able to use negative coordinates so I can draw and display some rectangles outside the image limits. (I'm using drag&drop mechanism to add new rectangles to my container over the image). The code below is part of the build method of a widget (Note: "myNetworkImageProvider" is provided to the widget from a controller not shown here).

   return Center(
      child: FittedBox(
        fit: BoxFit.fitHeight,
        child: Stack(
          alignment: Alignment.topCenter,
          children: [
            Container(
              alignment: Alignment.center,
              child: Image(
                  image: myNetworkImageProvider,
                  alignment: Alignment.topCenter,
                  fit: BoxFit.fitHeight,
              ),
            ),
            Positioned.fill(
              child: DraggableRectanglesViewerWidget(),
            ),
          ],
        ),
      ),
    );

The code above it's working well, however the "DraggableRectanglesViewerWidget" is limited to the size of the image since the Positioned.fill widget clipped everything drawn outside.

I'm trying to find a way to draw and view rectangles that can start and/or end outside of the limits of the underlying image. But at the same time, I would like to keep the coordinates of these rectangles relative to the top left corner of the image which is (0,0). For example, I would like to draw a rectangle having its top left corner at (-30, 30). This way, when resizing the window, the rectangles keeps their positions relative to the top left corner of the image. Otherwise, if a draw the rectangles in a container larger than the image, when resizing, they do not stay relative to the image since they are relative to the top left corner of their container.

0

There are 0 best solutions below