# Resolution-aware image assets in flutter

In Flutter, you can create resolution-aware image assets by providing multiple image assets at different resolutions (also known as "image scales") and letting Flutter automatically select the appropriate image asset based on the device's screen density. This helps ensure that your app looks crisp and clear on a variety of devices with different screen resolutions.

To create resolution-aware image assets in Flutter, follow these steps:

1. Prepare Your Image Assets:
   * Create the same image in multiple resolutions, typically at 1x, 2x, and 3x. For example, if you have an image named "my\_image.png," create three versions: "my\_image.png" (1x), "<my_image@2x.png>" (2x), and "<my_image@3x.png>" (3x). These resolutions are standard, but you can create additional variations as needed.
   * Place these image assets in the `assets` folder of your Flutter project.
2. Update Your `pubspec.yaml` File:

   * Open your `pubspec.yaml` file and add the image assets to the `assets` section. Make sure to include all the different resolutions you created. For example:

   ```yaml
   flutter:
     assets:
       - assets/my_image.png
       - assets/my_image@2x.png
       - assets/my_image@3x.png
   ```
3. Use the Images in Your Flutter Code:

   * To display the images in your Flutter code, you can use the `Image.asset` widget. Flutter will automatically select the appropriate image based on the device's screen density. For example:

   ```dart
   Image.asset('assets/my_image.png') // No need to specify @2x or @3x
   ```

   Flutter will handle selecting the correct image for the device's screen density.
4. Test on Different Devices:
   * Test your app on various devices and screen densities to ensure that the correct image is displayed on each.

By following these steps, you can create resolution-aware image assets in Flutter, which will ensure that your app looks sharp and well-optimized on a wide range of Android and iOS devices with different screen resolutions and densities.

## Using folder structure

Creating resolution-aware image assets in Flutter using a folder structure is a more organized and maintainable approach. It helps you keep your project clean and makes it easier to manage different image assets for various screen densities. Here's how you can achieve this:

1. **Folder Structure**:

   Organize your image assets in a directory structure based on their resolutions. Commonly, you would have three folders for standard Android densities: `1x`, `2x`, and `3x`. For iOS, you can use `1x`, `2x`, and `3x` as well, but you may also consider using `2x` and `3x` with `~iphone` and `~ipad` suffixes for device-specific optimizations. For example:

   ```
   assets/

   ├── images/
       ├── 1x/
       │   └── my_image.png
       ├── 2x/
       │   └── my_image.png
       ├── 3x/
       |    └── my_image.png
       |
       |_____ my_image.png


   ```
2. **Update `pubspec.yaml`**:

   In your `pubspec.yaml` file, you only need to specify the root directory of your image assets. Flutter will automatically search for images in subdirectories based on the device's screen density. For example:

   ```yaml
   flutter:
     assets:
       - assets/images/my_image.png
   ```
3. **Usage in Flutter Code**:

   To use the images in your Flutter code, you can still use the `Image.asset` widget. However, you only specify the image filename without the density suffix, and Flutter will select the correct image based on the device's screen density:

   ```dart
   Image.asset('assets/images/my_image.png')
   ```

   Flutter will take care of selecting the appropriate image from the `1x`, `2x`, or `3x` folder based on the device's screen density.

By organizing your image assets with this folder structure, you can easily manage and update your assets, and Flutter will handle selecting the right image for different screen densities. This approach helps keep your Flutter project clean and organized, making it easier to work with resolution-aware images.