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?
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:
Answered By – SteAp
Answer Checked By – Senaida (FlutterFixes Volunteer)