Assets, where to put what

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.

Assets, where to put what

Comments

Flutter for Line Of Business Apps

Theming

More from this blog

Anatomy of a Flutter upgrade.

Software maintenance

Consumer apps versus workforce apps

Navigator onPopPage versus onDidRemovePage, Part 2

Navigator onPopPage versus onDidRemovePage

Command Palette

Comments

Flutter for Line Of Business Apps

Theming

More from this blog