CODEWITHSUNDEEP
flutterflutter-layout
IAmJulianAcosta
IAmJulianAcosta

Reputation: 1212

How can I render an image in several widgets?

I need to render an image in several different image widgets, just like this photo:

Cat image rendered in two widgets

And add them to a column Widget. I have a restriction that each widget must not be taller than 120px. I have tried SizedOverflowBox with ClipRect, and SizedBox but didn't work.

This is how I'd doing using CSS (Obviously with some JS to generate dynamic DIVs and all the bells and whistles):

#top, #bottom {
  width: 240px;
  height: 120px;
  background-image: url("/img/cat.jpeg");
}

#top {
  background-position: 0 0;
}

#bottom {
  background-position: 0 -120px;
}

That would generate something like this:

Image split in two elements

I haven't found any widget combination that allows me to do it.

Upvotes: 0

Views: 157

Answers (1)

Matthew Trent
Matthew Trent

Reputation: 3274

Try using a Stack widget (https://youtu.be/liEGSeD3Zt8). You can layer widgets on the z-axis using it. Then, add 2 children widgets to it where each is wrapped inside a Positioned widget (https://youtu.be/EgtPleVwxBQ). This will allow you to move the 2 children relative to each other in the Stack.

Upvotes: 1

Related Questions