CODEWITHSUNDEEP
flutter
Icare
Icare

Reputation: 1371

How to deal with different icon sizes

When developing for iphone, in Xcode/Swift there is an asset file where you add all the icons your application will use with 1, 2 and 3x sizes. There is probably a similar thing with Android that I don't know yet.

When developing for Flutter:

If you know a tutorial or web page, just let me know! The only ones that I found are only dedicated for app icon and launch screen.

Thanks

Upvotes: 4

Views: 2181

Answers (2)

Jason
Jason

Reputation: 2695

To add to @diegoveloper answer.

Some plugins like google-maps do not honour this standard and require you to call BitmapDescriptor.fromAsset('icons/heart.png') which is not converted to the correct image. In this case you can get the correct image from AssetImage by first createLocalImageConfiguration using the BuildContext as defined here. Then use this configuration to resolve the correct image as follows:

ImageConfiguration config = createLocalImageConfiguration(context);
AssetImage('icons/heart.png')
   .obtainKey(config)
   .then((resolvedImage) {
       print('Name: ' + resolvedImage.onValue.name);
    });

In summary

Create an asset folder with the naming convention:

pathtoimages/image.png
pathtoimages/Mx/image.png
pathtoimages/Nx/image.png
pathtoimages/etc.

Where M and N are resolutions (2.0x) or themes (dark). Then add the image or all the images to the pubspec.file as either

flutter:
  assets:
    - pathtoimages/image.png

or 

flutter:
  assets:
    - pathtoimages/

Load the images in using either AssetImage('pathtoimages/image.png') or resolving to the actual file name as mentioned above, depending on the library being used.

Upvotes: 1

diegoveloper
diegoveloper

Reputation: 103381

Just check the official documentation about resolution-aware-image. This is based on the device pixel ratio.

Here you have an example about the structure of your files.

  .../pubspec.yaml
  .../icons/heart.png
  .../icons/1.5x/heart.png
  .../icons/2.0x/heart.png

And this is how you have to declare the assets files into your pubspec.file

        flutter:
          assets:
            - icons/heart.png

This is the link: https://flutter.io/docs/development/ui/assets-and-images#declaring-resolution-aware-image-assets

Upvotes: 4

Related Questions