Add image assets
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:
Adding resolution-aware image assets#
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.
For example:
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 pubspec.yaml file:
Next, go to the main app and add the image constants in the file /src/config/image_constants.dart:
Set the image asset path in the Image widget as shown below: