Assets, where to put what

Assets, where to put what

ยท

2 min read

Table of contents

No heading

No headings in the article.

I am good at programming, but not good at drawing and designing icons. Also, it is better to have the theming of the app and layout of the screens to be done by a visual designer. A professional, who knows how to create a consistent look and feel, and to make the app visually attractive.

So when the visual designer has done his job, I have a bunch of screens and assets. Normally we get the designs in Zeplin. This is very handy because it allows seeing the exact amount of pixels the visual designer used for spacing and elements.

With Zeplin, it is also possible to download the assets as a zip file. The contents are in the following folders:

  • drawable-mdpi
  • drawable-hdpi
  • drawable-xhdpi
  • drawable-xxhdpi
  • drawable-xxxhdpi

From the Flutter documentation, I learned that assets could be resolution aware if you have the right naming of the folders. But it was not obvious for me where I should put what.

After some testing I used the following scheme:

  • Project Folder
    • assets
      [drawable-mdpi]
      • 1.5x
        [drawable-hdpi]
      • 2.0x
        [drawable-xhdpi]
      • 3.0x
        [drawable-xxhdpi]
      • 4.0x
        [drawable-xxxhdpi]
    • sounds
    • fonts

Although I did not find this in the Flutter documentation, it looked logical to me. And testing it on the TC57 showed the size of the images was as intended by the designer.

ย