Image Res #

A command-line tool which simplifies a task of placing image files into appropriate folders based on their resolution. Refer to https://flutter.dev/docs/development/ui/assets-and-images#loading-images for further information regarding how Flutter manages resolution-appropriate images. To put it another way, when you place your image assets in a Flutter project and run this plugin. It'll look into all images' filename and automatically move them to appropriate-resolution folders.

For example, if you place images in the asset folder as shown below:

assets/
+-- images/
|   +-- icons/
|   |   +-- search.png
|   |   +-- [email protected]
|   |   +-- [email protected]
|   +-- logo.png
|   +-- [email protected]
|   +-- [email protected]

After running this plugin (with a configuration file in the project's root directory), the images whose filename includes a resolution indicator will be moved as follows:

assets/
+-- images/
|   +-- 2.0x/
|   |   +-- logo.png
|   +-- 3.0x/
|   |   +-- logo.png
|   +-- icons/
|   |   +-- 2.0x/
|   |   |   +-- search.png
|   |   +-- 3.0x/
|   |   |   +-- search.png
|   |   +-- search.png
|   +-- logo.png

Getting Started #

1. Install the image_res plugin by adding it in pubspec.yaml under dev_dependencies section and run flutter packages get

   dev_dependencies: 
       image_res: ^0.2.2
   

2. Create a new configuration file called image_res.yaml in the project's root directory

   # The organizer recursively looks into all files in the `asset_folder_path`. (relative to the project's root)
   asset_folder_path: assets/images/
   
   # The organizer only arranges files with their extension listed in the `file_extensions`.
   file_extensions:
       - .jpg
       - .png
   
   # The organizer uses `resolution_indicator` to extract a resolution's part from the filename.
   # The `resolution_indicator` must conform to the following pattern:
   #   '[start_token]{N}[end_token]' where
   #       - [start_token]: A token that indicates a starting point of the resolution's part.
   #       - [end_token]: A token that indicates an ending point of the resolution's part.
   #
   # Valid `resolution_indicator`s along with example filenames that they can detect are shown below.
   #   '@{N}x': [email protected], [email protected], @2.0xlogo.png
   #   '--{N}#': logo--2#.png, logo--2.0#.png, --2.0#logo.png
   resolution_indicator: '@{N}x'
   
   # If `allow_overwrite` is true when there is the same filename already existing in a target folder, the organizer will replace it.
   allow_overwrite: false
   
   

3. Run the plugin in the project's root directory. See Available CLI Commands

   flutter packages pub run image_res:main <command>
   

Note that this plugin can be installed globally by flutter packages pub global activate image_res. Instead of typing a long command shown above, you can run it by just imgres.

If you encounter an issue indicating dart: command not found, please install Dart separately first and try running again.

Available CLI Commands #

Usage #

• If the plugin was installed globally, run it by:

  imgres <command>
  

• If the plugin was installed locally in a Flutter project, run it by:

  flutter packages pub run image_res:main <command>