In my article on the Advantages and Disadvantages of Flutter, I pointed out that Flutter has some problems with image cutting and resource management, so I wrote a small tool using Node.js to help you quickly generate low magnification images and ICONS for iOS and Android platforms.

Global Installation in Advance

  • flutter
  • Node. Js environment
  • NPM package management tool

Fmaker function

Fmaker is a Flutter image processing tool that can also be used to generate ICONS for iOS or Android projects

Generate pictures by multiplication

Fmaker can automatically identify multiples in/Assets/Fmaker projects, recursively convert multiples into folders of 2.0x, 3.0x and 4.0x according to flutter format, and then save the compressed low-magnification images into assets to ensure that Flutter can automatically recognize low-magnification images. For example, placing [email protected] under a folder produces triples, doubles, and doubles.

Why do you do that?

Because when high-resolution images are reduced, unnecessary sharpening will occur, occasionally causing stuttering; Small images become blurred when they are enlarged. Flutter provides a feature that automatically displays images at the correct resolution. However, using this feature is difficult. If you use Sketch to cut images, you can only cut images like image.png,[email protected],[email protected], But flutter need picture catalogue format is image. The PNG, 2.0 x/image. PNG, 3.0 x/image. PNG, use the sketch this format is difficult to an export (need to every time change the export name), is very bad.

Generate App ICONS

PNG and android_icon. PNG files in /assets/fmaker will automatically recognize these files and generate ICONS directly into the project without additional copy-and-paste.

Note: iOS ICONS cannot contain alpha channels, Android ICONS can. The common point is that ICONS must be square and fmaker will check the icon size for you and output errors in the log.

The installation

git clone https://github.com/mjl0602/flutter-assets-maker.git
cd flutter-assets-maker
npm install -g
fmaker
Copy the code

If you see the log that says “No corresponding command, fmaker installed”, the installation is successful.

use

Let’s say your project is called yourFlutterProject.

Need to prepare the icon file, ios_icon. PNG and ios_android PNG, under yourFlutterProject/assets/fmaker, other times more figure can also be put in, for example, [email protected].

Tips: If you can’t find a compliant file and want to try it out, use Fmaker Init to use my test images.

cd yourFlutterProject
fmaker init # If you can't find a graph, test it with my graph
fmaker build
Copy the code

Then the android and iOS App ICONS have been replaced, and you can launch the project to view them.

Pay attention to

  • The tool theoretically supports PNG only.
  • The tool produces two identical graphs, one for the highest magnification and one for the source, increasing the project size somewhat.
  • It is recommended not to reference the source diagram in the fmaker folder because it cannot be automatically switched.
  • Fmaker’s duplicate images do not increase the product size, as long as you do not introduce the source image.

The sample

//TODO is available for the whole example

If there is a bug, feel free to issue, pr is better. Warehouse address :github.com/mjl0602/flu…

# Republication of this article is prohibited without the author’s permission