Why does widget draws across columns of a Row widget

Issue

This web app uses a Row() widget to separate the screen into a left drawing area and a right inspector area.

  Row(children: <Widget>[
    Expanded(
      child: DragTarget(
                builder: (context, List<int> candidateData, rejectedData) {
                  return Center(
                      child: CustomMultiChildLayout(
                    delegate: SEditorLayoutDelegate(myModel),
                    children: myModel.allItemsList(), // draws e.g. rectangle
                  ));
                },
               ....
            ),
            VerticalDivider(),
            ConstrainedBox(
              constraints: const BoxConstraints.tightFor( ... ),
              child: PropertyInspector())
  ])

As I move the widget inside a MultiChildLayoutDelegate around, which draws a rectangle, using the mouse, the rectangle draws across the left column over the right column.

Inside the performLayout() method of MultiChildLayoutDelegate, I perform

positionChild(n, Offset(p.x, p.y));
layoutChild(n, BoxConstraints.expand(width: p.width, height: p.height));

Obviously, this makes the rectangle drawing widget overlap the right column.

How do I clip the widget in the left column to not overlap the right column?

enter image description here

Solution

I expected Row to restrict the drawing of its several children to their respective screen areas. In fact, it does not.

Therefore one needs to wrap the drawing area within a ClipRect, to make the painting of each client get clipped to its screen area.

Code:

ClipRect(
  child: Center(
    child: CustomMultiChildLayout(
     delegate: SEditorLayoutDelegate(myModel),
     children: myModel.allItemsList(),
     )
   )
);

Result:

enter image description here

Answered By – SteAp

Answer Checked By – Senaida (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *