This issue of distortion of images and components is certainly related to the Adal layout system. Adalo does not use a traditional Row or Column structure as found in Flutter or other platforms. Instead, Adalo relies mostly on a Stack or Absolute layout, where components are arranged in a specific position, which can cause problems at different screen sizes or platforms.
Why does this happen?
Stack (absolute layout):
Components are arranged according to exact coordinates rather than dynamically by container (e.g. Row or Column). Therefore, if the screen is of a different size or aspect ratio than the development environment, images may be duplicated, overlapping or misaligned.
Adjusting screen sizes:
Adalo sometimes struggles to adapt to the screen sizes of different devices, especially if the design is not properly optimised for different resolutions. This is a common problem with static elements (e.g. icons or images).
Proportions and Preview mode:
Preview mode in the Adalo environment often does not correspond to the actual proportions of devices. Although everything seems to work fine at first glance, the layout may be different on the actual device.
How to solve this?
Use Groups:
Place related items in Groups to keep them in one structure. This helps to keep the proportions and layout correct even when the screen size changes.
Use dynamic resizing:
Make sure that components are set in percentages, not pixels. For example, ensure that the size and location of buttons are dynamically set according to the size of the container rather than absolute coordinates.
Adapt the design to different devices:
Use Adalo functions to test how your design looks on different devices. Adalo allows you to preview your design on different screens, so it’s worth checking that all elements are correctly positioned.
Use Simple List or Custom List components:
If you need to arrange elements in a single column or row, Adalo’s List components can better manage the layout of the components.
Check the format and aspect ratio of images:
Make sure all images and icons are in the correct format (e.g. square or proportional). If images have the wrong aspect ratio settings, they may be distorted.
