如果更改屏幕方向，如何修复按钮大小？

Question

I have this app wherein in requires to change the screen orientation. First image is for portrait and Second image is for landscape. But there are instances that the two(2) buttons become large when I change the orientation from landscape to portrait. The third image will show you how big the buttons after changing orientation which is it does not follow the correct portrait layout.

portrait

landscape

bigger button when changed orientation

The solution I tried was the image below:

Attached equal heights

Set to 0.18 proportional height

I am having a hard time to fix this issue aside from, it is the first time I encountered this issue, the issue does not appear 100% and this issue usually appear in iPhoneX series specifically iPhoneX. Hope you can help me regarding this. Thank you in advance.

Answer 1

Always use size class to handle objects in different screens. Or the other option is to use Stack. But size class is always the best option.

Answer 2

Use vary for traits (Size classes) and provide constraints for width & height for each button for different orientations.