Flutter for Line Of Business apps – 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 its 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 were as intended by the designer.

Published by Sander Roest

Professional app developer.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: