title: Draw paint inside different shapes using painter library flutter
body: <p>I'm trying to draw a painting inside the drawn shape (it could be anything like a rectangle, circle, etc), using <a href="https://pub.dev/packages/painter" rel="nofollow noreferrer">Flutter's painter</a> library. The paint is drawing perfectly outside the area of the shape. But when I tried to draw inside the shape it didn't work. I'm attaching code here so please help!</p>
  <blockquote>
  <p>This project is only built for iPad 9 4th Gen.</p>
  </blockquote>
  <blockquote>
  <p>loadDrawingArea method (this widget is the parent widget of the screen)</p>
  </blockquote>
  <pre><code>loadDrawingArea() {
  return Flexible(
    child: Column(
      children: [
        Flexible(
          child: PageView.builder(
            controller: pageController,
            itemCount: selectedTemplateList.length,
            scrollDirection: Axis.vertical,
            onPageChanged: (page) {
              selectedShape = -1;
              currentPage = page.toInt();
  
              for (int i = 0; i &lt; selectedTemplateList.length; i++) {
                for (int j = 0; j &lt; selectedTemplateList[i].length; j++) {
                  selectedTemplateList[i][j].isSelected = false;
                }
              }
              setState(() {});
            },
            itemBuilder: (BuildContext context, int index) {
              return InkWell(
                splashColor: transparentColor,
                highlightColor: transparentColor,
                onTap: () {
                  setPaintMode(setTo: true);
                  for (int i = 0;
                      i &lt; selectedTemplateList[index].length;
                      i++) {
                    selectedTemplateList[index][i].isSelected = false;
                  }
                  selectedShape = -1;
  
                  setState(() {});
                },
                child: isPaintModeOnList[currentPage]
                    ? Stack(
                        children: [
                          Painter(
                            painterControllerList[currentPage],
                          ),
                          loadDrawingPaper(selectedTemplateList[index]),
                        ],
                      )
                    : loadDrawingPaper(selectedTemplateList[index]),
              );
            },
          ),
        ),
        Container(
          alignment: Alignment.topRight,
          margin: EdgeInsets.only(right: 16.0, bottom: 8.0),
          child: Text(
            (currentPage + 1).round().toString() +
                &quot;\t/\t&quot; +
                selectedTemplateList.length.toString(),
            textAlign: TextAlign.end,
            style: TextStyle(color: blackColor, fontSize: 20.0),
          ),
        )
      ],
    ),
  );
  </code></pre>
  <p>}</p>
  <blockquote>
  <p>Main Stack Widget where Painter and drawing paper are building</p>
  </blockquote>
  <pre><code> Stack(
          children: [
          Painter(
          painterControllerList[currentPage],
          ),
          loadDrawingPaper(selectedTemplateList[index]),
          ],
        )
  </code></pre>
  <blockquote>
  <p>loadDrawingPaper method code</p>
  </blockquote>
  <pre><code> loadDrawingPaper(shapesList) {
  return Stack(
    children: [
      loadGridPaper(),
      for (int index = 0; index &lt; shapesList.length; index++)
        GestureDetector(
          onLongPress: () {
            for (int i = 0; i &lt; index; i++) {
              shapesList[i].isSelected = false;
            }
            shapesList[index].isSelected = true;
            for (int i = index + 1; i &lt; shapesList.length; i++) {
              shapesList[i].isSelected = false;
            }
            selectedShape = index;
            setState(() {});
          },
          child: Visibility(
            visible: shapesList[index].isVisible,
            child: loadShape(shapesList, index: index),
          ),
        ),
    ],
  );
  </code></pre>
  <p>}</p>
  <blockquote>
  <p>loadShape method code</p>
  </blockquote>
  <pre><code>Widget loadShape(shapesList, {required index}) {
  print(shapesList[index].shapeType);
  switch (shapesList[index].shapeType) {
    case rectangleShape:
      return drawRectangle(shapesList, i: index);
    case circleShape:
      return drawCircle(shapesList, i: index);
    case squareShape:
      return drawSquare(shapesList, i: index);
    case cornerShape:
      return drawCorner(shapesList, i: index);
    case lineShape:
      return drawLine(shapesList, i: index);
    case dashedLineShape:
      return drawDashedLine(shapesList, i: index);
    case dottedShape:
      return drawDottedLine(shapesList, i: index);
    case textShape:
      return drawText(shapesList, i: index);
    case arcShape:
      return drawArc(shapesList, i: index);
  
    default:
      return Text(&quot;default&quot;);
  }
  </code></pre>
  <p>}</p>
  <blockquote>
  <p>drawRectangle method code</p>
  </blockquote>
  <pre><code>Widget drawRectangle(shapesList, {required i}) {
  return GestureDetector(
    child: RectangleResizable(
      width: shapesList[i].width,
      height: shapesList[i].height,
      top: shapesList[i].top,
      left: shapesList[i].left,
      strokeWidth: shapesList[i].strokeWidth,
      // strokeColor: stringToColor(colorString: shapesList[i].strokeColor),
      strokeColor: Colors.red,
      fillColor: Colors.white,
      // fillColor: stringToColor(colorString: shapesList[i].fillColor),
      color: shapesList[i].isSelected ? blueColor : transparentColor,
      onShapeDrag: (dx, dy) {
        onShapeDrag(shapesList, i, dx, dy);
      },
      onShapeDragEnd: () {
        updateUndoList(shapesList, i);
      },
      onTopLeftDrag: (dx, dy) {
        if (!shapesList[i].isLocked) {
          var mid = (dx + dy) / 2;
          var newHeight = shapesList[i].height - 2 * mid;
          var newWidth = shapesList[i].width - 2 * mid;
          onDrag(shapesList, i);
  
          setState(() {
            shapesList[i].height = newHeight;
            shapesList[i].width = newWidth;
            shapesList[i].top = shapesList[i].top + mid;
            shapesList[i].left = shapesList[i].left + mid;
          });
        }
      },
      onTopCenterDrag: (dx, dy) {
        if (!shapesList[i].isLocked) {
          var newHeight = shapesList[i].height - dy;
          onDrag(shapesList, i);
  
          setState(() {
            shapesList[i].height = newHeight;
            shapesList[i].top = shapesList[i].top + dy;
          });
        }
      },
      onTopRightDrag: (dx, dy) {
        if (!shapesList[i].isLocked) {
          var mid = (dx + (dy * -1)) / 2;
  
          var newHeight = shapesList[i].height + 2 * mid;
          var newWidth = shapesList[i].width + 2 * mid;
          onDrag(shapesList, i);
  
          setState(() {
            shapesList[i].height = newHeight;
            shapesList[i].width = newWidth;
            shapesList[i].top = shapesList[i].top - mid;
            shapesList[i].left = shapesList[i].left - mid;
          });
        }
      },
      onCenterLeftDrag: (dx, dy) {
        if (!shapesList[i].isLocked) {
          var newWidth = shapesList[i].width - dx;
          onDrag(shapesList, i);
  
          setState(() {
            shapesList[i].width = newWidth;
            shapesList[i].left = shapesList[i].left + dx;
          });
        }
      },
      onCenterCenterDrag: (dx, dy) {
        if (!shapesList[i].isLocked) {
          onDrag(shapesList, i);
  
          setState(() {
            shapesList[i].top = shapesList[i].top + dy;
            shapesList[i].left = shapesList[i].left + dx;
          });
        }
      },
      onCenterRightDrag: (dx, dy) {
        if (!shapesList[i].isLocked) {
          var newWidth = shapesList[i].width + dx;
          onDrag(shapesList, i);
  
          setState(() {
            shapesList[i].width = newWidth;
          });
        }
      },
      onBottomLeftDrag: (dx, dy) {
        if (!shapesList[i].isLocked) {
          var mid = ((dx * -1) + dy) / 2;
  
          var newHeight = shapesList[i].height + 2 * mid;
          var newWidth = shapesList[i].width + 2 * mid;
          onDrag(shapesList, i);
  
          setState(() {
            shapesList[i].height = newHeight;
            shapesList[i].width = newWidth;
            shapesList[i].top = shapesList[i].top - mid;
            shapesList[i].left = shapesList[i].left - mid;
          });
        }
      },
      onBottomCenterDrag: (dx, dy) {
        if (!shapesList[i].isLocked) {
          var newHeight = shapesList[i].height + dy;
          onDrag(shapesList, i);
  
          setState(() {
            shapesList[i].height = newHeight;
          });
        }
      },
      onBottomRightDrag: (dx, dy) {
        if (!shapesList[i].isLocked) {
          var mid = (dx + dy) / 2;
  
          var newHeight = shapesList[i].height + 2 * mid;
          var newWidth = shapesList[i].width + 2 * mid;
          onDrag(shapesList, i);
  
          setState(() {
            shapesList[i].height = newHeight;
            shapesList[i].width = newWidth;
            shapesList[i].top = shapesList[i].top - mid;
            shapesList[i].left = shapesList[i].left - mid;
          });
        }
      },
    ),
  );
  </code></pre>
  <p>}</p>
  <p><strong>Note -: All the other methods of drawing all the shapes are the same, I have only attached the rectangle shape's code here.</strong></p>