To add an image or assets, make a folder named
/assets in the app folder at root location:
Now, for each screen create a sub folder as follows:
Modify your folder structure to this:
Next, download all the images in resolutions 1x 2x and 3x. The main asset is assumed to correspond to a resolution of 1.0. On devices with a pixel ratio of 1.8, the asset 2.0x is selected and on devices with a pixel ratio of 2.7, the asset 3.0x is selected.
If the width and height of the rendered image are not specified on the Image widget, the nominal resolution is used to scale the asset so that it occupies the same amount of screen space as the main asset would have, just with a higher resolution.
That is, if
.../image_ex.png is 72px by 72px, then
.../3.0x/image_ex.png should be 216px by 216px; but they both render into 72px by 72px (in logical pixels), if width and height are not specified.
Now, add these assets to the
Next, go to the main app and add the image constants in the file
Set the image asset path in the Image widget as shown below: