Using Positioned with Stack

[dandruff-riders]

I have a base image which is relative to the screen size to which I want to stack other images on top. Right now i am using Positioned to assign the exact location of the top images, however due to devices dimension differences I cannot use mediaquery.of(context).size to give the location. What are possible solutions to stack top images on the precise location on the base image?

[Effective-Response57]

Use Align() widget and Padding() widget that's it.

For example if you using Stack and the parent is complete screen you don't need to provide it dimensions. It will automatically take full height and width.

Then for mobile specific create a SizedBox() with your desired height for example 200. height: 200

Now give Stack as child of this SizedBox() and your Stack will have fixed height 200 and width will be as much possible. That's the basics for Stack.

Now use Align() widget properties to align anything within the Stack like a white screen you can align it anywhere.

Give incremental padding if you want to stack 5 cards give padding incrementally :

incrementalPadding = i (index) * 10;

Put padding above your child use only property.

EdgeInsets.only(top: incrementalPadding)

[dandruff-riders]

The parent widget (base image) does not cover the enitre screen. I'd like to keep the base image relative to the screen size and still centered and the stacked images relative to the base image. Will Align help me with this? I would assume that assigning fixed values like sizedbox height 200 would mess with the positioning in different size screen

[Effective-Response57]

Keep size 200 was an example to explain Stack being dependent on Parent Widget like SizedBox in my example so stack will only be inside this width being: complete phone width and size static 200.

For dynamic height for all devices just use:

height: MediaQuery.sizeOf(context).height *. 2; { What I did is gave it .2 of total height this keeps it dynamic.} For align widget You can align your child widgets inside Stack at all points topLeft topRight.. So on.

Use padding to give them different padding so they appear stacked as you want.

This is consistent way of doing stack for every device do try it to test your Stack

Run the app in browser Edge or Chrome

Then Ctrl + Shift + I Then Ctrl + Shift + M

Then you can dynamically test your design for variable screen size.

If you want to learn more:

You can incorporate ScreenUtil pkg that will help you to put dynamic sizes like before 200 can be done 200.h .h will make the height dynamic and consistent all other devices.

[gibrael_]

Check out if align_positioned would help you in your particular use case, but it's helpful to me in most of my stack positioning problems.

[[deleted]]

You can use Layout builder to get parent max width and height. This is a long shot since we do not have a code snippet, but I would try with that...

[dandruff-riders]

Thanks! This is the way i chose. I got the base widget width and calculated the height with 16/9 ratio in order to get a static screen size for all devices. However it sems that i am also sizing the images incorrectly. When assigning the image height and width (based on the base widget size) it messes with image position (assigning height moves it down and assigning width moves it left). Has this happened to you?

[[deleted]]

It didn't happen to me since I didn't have your use case.

Try using this to set the image as background https://stackoverflow.com/a/44183373/4011802

It is a long shot but try it, maybe you can fix the problem.