Is an angled divider between expanded images in row -- Flutter

Question

Trying to implement this kind of look in Flutter:

Currently, I have a Row with Expanded images in it. So they both share half of the container without padding. The next step is an angled divider between them.

How would you go about it? I understand something like ClipPath is involved here, but I am not entirely sure how to approach the task.

Answer 1

You can consider these two pictures as 2 layers, one on top, and the other one on the bottom. You can use Stack to stack them like that. You can then use ClipPath like you said, to clip the top layer, so some parts of the bottom layer would become visible. The key takeaway is to use a Stack instead of using a Row widget, otherwise the 2 pictures would be on the "same level" and clipping one would not reveal the other.