1

I have a situation where I am using a CustomPaint to draw some interactable elements in Flutter Web. The CustomPaint works just fine, but the GestureDetector does not adhere to the shifted left position of the CustomPaint. The first screenshot is the raw paint, as the user would see it. The CustomPaint repeats in 4 sets of 5 (Set 1, 0px left position, then increases by 20 each set, producing the gaps between sets). However, this results in the second screenshot, where the final render has almost no interactable area where it would be expected, due to a cumulative 80 pixel shift left since the GestureDetector is not wrapping the CustomPaint at the rendered coordinates. See the pictures below for a visual of the issue:

Image 1: Raw Render (No GestureDetector highlighting) enter image description here

Image 2: Render with BoxDecoration overlay active showing GestureDetector interactable area enter image description here

This is my first serious project in Flutter, so I'm a bit flummoxed here. I know it's down to either a misunderstanding of a component or context, that or it's a matter of me doing this in a way that won't work, but as far as I can tell looking at the Flutter docs it should work (I've read up on Containers, GestureDetector, and CustomPaint for this issue), and it's clearly not. I've tried various ways of nesting these widgets, and through that coupled with some box decoration rendering to check overlays, that's how I've narrowed this down to a matter of the GestureDetector not rendering with respect to the offset past that first set of 5 renders. The relevant code block is below (it's the return function for the widgets Build method) If there is any other code that could help with narrowing down a solution here, please let me know:

return Consumer<DashboardModel>(
      builder: (context,model,child) => GestureDetector(
            onTap: ()=>handleTap(),
            child: CustomPaint(
                size: Size(widget.paneWidth, widget.paneHeight),
                painter: WindowPainter(context, widget.posLeft, widget.posTop, widget.paneWidth, widget.paneHeight,customPaint),
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.amber,
                    border: Border.all(
                      color: Colors.red,
                      width: 8,
                    ),
                  ),
                  height: widget.paneHeight,
                  width: widget.paneWidth,
                )
            )
        ),
      );

Some questions I've looked at to see if they fit the description or could solve the issue include:

Saphiric
  • 81
  • 1
  • 8
  • and where are you setting those gaps between every 5 blocks? are you using `SizedBox(width: )` somewhere? – pskink Oct 21 '21 at 16:45
  • widget.posLeft in the WindowPainter constructor. Set one has it set to 0, set 2 has it increased by 20, set 3 another 20 point increase, and set 4 a final 20 point increase. – Saphiric Oct 21 '21 at 16:51
  • WindowPane passes the constructor arguments down to a nested class called WindowPainter (extension of the CustomPaint class) which is then used in the build method for the Windowpanes' widget for rendering, which is the return function I posted in the question. – Saphiric Oct 21 '21 at 16:57
  • Example: WindowPane( windowId: '0005', posLeft: 0, posTop: 0, paneWidth: viewportWidth / 25, paneHeight: 200), – Saphiric Oct 21 '21 at 16:57

0 Answers0