Flutter Launcher Icons Examples

Flutter Launcher Icons: How To Examples

Introduction

Flutter Launcher Icons is a package that helps you easily generate and customize app launcher icons for your Flutter project. Launcher icons are the app icons that users see on their device's home screen, app drawer, and task switcher. This package provides a simple way to generate icons in the required sizes and formats for different platforms.

In this tutorial, we will walk through the installation process of the Flutter Launcher Icons package and provide step-by-step examples on how to generate and customize launcher icons for your Flutter app.

Installation

To get started with Flutter Launcher Icons, follow these steps:

1. Open your Flutter project in your preferred code editor.
2. Open the terminal and navigate to your project's root directory.
3. Add the flutter_launcher_icons package to your pubspec.yaml file:

dependencies:
  flutter_launcher_icons: ^0.8.1

4. Save the file and run flutter pub get in the terminal to fetch the package.
5. Once the package is installed, you can proceed with generating and customizing your launcher icons.

Example 1: Generating Launcher Icons

To generate launcher icons for your Flutter app using Flutter Launcher Icons, follow these steps:

1. In your project's root directory, create a new folder called assets.
2. Inside the assets folder, create another folder called icons.
3. Place your app's icon in the icons folder. Make sure it is a square image with a high resolution (preferably 1024x1024 pixels).
4. Open the terminal and navigate to your project's root directory.
5. Run the following command to generate the launcher icons:

flutter pub run flutter_launcher_icons:main

6. Wait for the process to complete. Once finished, you will see the generated launcher icons in the respective platform folders (android/app/src/main/res for Android, ios/Runner/Assets.xcassets for iOS).

The Flutter Launcher Icons package will automatically resize and generate launcher icons in the required sizes and formats for Android and iOS platforms. You should see the generated icons in the appropriate platform folders.

Example 2: Customizing Launcher Icons

Flutter Launcher Icons also allows you to customize your launcher icons by modifying the pubspec.yaml file. Here's how you can do it:

1. Open the pubspec.yaml file in your project's root directory.
2. Add the following configuration under the flutter_icons section:

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icons/icon.png"

3. Replace "assets/icons/icon.png" with the path to your app's icon.
4. Save the file and run the following command in the terminal:

flutter pub run flutter_launcher_icons:main

The Flutter Launcher Icons package will use the specified image path to generate the launcher icons. After the process is complete, you should see the customized icons in the respective platform folders.

Example 3: Changing the Background Color

You can also change the background color of your launcher icons using Flutter Launcher Icons. Here's how:

1. Open the pubspec.yaml file in your project's root directory.
2. Add the following configuration under the flutter_icons section:

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icons/icon.png"
  adaptive_icon_background: "#FFFFFF"

3. Replace "assets/icons/icon.png" with the path to your app's icon.
4. Replace "#FFFFFF" with the desired background color in hexadecimal format.
5. Save the file and run the following command in the terminal:

flutter pub run flutter_launcher_icons:main

The Flutter Launcher Icons package will generate launcher icons with the specified background color. Check the respective platform folders to see the updated icons.

Example 4: Changing the Foreground Color

In addition to the background color, you can also change the foreground (icon) color of your launcher icons. Here's how:

1. Open the pubspec.yaml file in your project's root directory.
2. Add the following configuration under the flutter_icons section:

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icons/icon.png"
  adaptive_icon_foreground: "#000000"

3. Replace "assets/icons/icon.png" with the path to your app's icon.
4. Replace "#000000" with the desired foreground color in hexadecimal format.
5. Save the file and run the following command in the terminal:

flutter pub run flutter_launcher_icons:main

The Flutter Launcher Icons package will generate launcher icons with the specified foreground color. Check the respective platform folders to see the updated icons.

Example 5: Specifying Icon Sizes

By default, Flutter Launcher Icons generates icons in the required sizes for different platforms. However, you can specify custom sizes if needed. Here's how:

1. Open the pubspec.yaml file in your project's root directory.
2. Add the following configuration under the flutter_icons section:

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icons/icon.png"
  android_icons:
    ldpi: true
    mdpi: true
    hdpi: true
    xhdpi: true
    xxhdpi: true
    xxxhdpi: true
  ios_icons:
    iphone: true
    iphone_2x: true
    iphone_3x: true
    ipad: true
    ipad_2x: true

3. Replace "assets/icons/icon.png" with the path to your app's icon.
4. Save the file and run the following command in the terminal:

flutter pub run flutter_launcher_icons:main

The Flutter Launcher Icons package will generate launcher icons with the specified sizes for Android and iOS platforms. Check the respective platform folders to see the updated icons.

Example 6: Customizing Android Adaptive Icons

Android supports adaptive icons, which consist of a foreground and background layer. Flutter Launcher Icons allows you to customize these layers separately. Here's how:

1. Open the pubspec.yaml file in your project's root directory.
2. Add the following configuration under the flutter_icons section:

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icons/icon.png"
  adaptive_icon_foreground: "assets/icons/foreground.png"
  adaptive_icon_background: "assets/icons/background.png"

3. Replace "assets/icons/icon.png" with the path to your app's icon.
4. Replace "assets/icons/foreground.png" and "assets/icons/background.png" with the paths to your custom foreground and background layers.
5. Save the file and run the following command in the terminal:

flutter pub run flutter_launcher_icons:main

The Flutter Launcher Icons package will use the specified foreground and background layers to generate custom adaptive icons for Android. Check the Android platform folder to see the updated icons.

Example 7: Providing iOS Icon Assets

For iOS, Flutter Launcher Icons requires additional configuration to provide icon assets. Here's how you can do it:

1. Open the pubspec.yaml file in your project's root directory.
2. Add the following configuration under the flutter_icons section:

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icons/icon.png"
  ios_assets_icon: true

3. Replace "assets/icons/icon.png" with the path to your app's icon.
4. Save the file and run the following command in the terminal:

flutter pub run flutter_launcher_icons:main

The Flutter Launcher Icons package will generate an AppIcon.appiconset folder inside the ios/Runner/Assets.xcassets directory, containing the required icon assets for iOS. Check the iOS platform folder to see the updated icons.

Example 8: Customizing iOS Icon Sizes

To customize the sizes of iOS icons, follow these steps:

1. Open the pubspec.yaml file in your project's root directory.
2. Add the following configuration under the flutter_icons section:

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icons/icon.png"
  ios_icons:
    iphone: true
    iphone_2x: true
    iphone_3x: true
    ipad: true
    ipad_2x: true
    ipad_pro: true
    ipad_pro_2x: true
    ipad_mini: true
    ipad_mini_2x: true

3. Replace "assets/icons/icon.png" with the path to your app's icon.
4. Save the file and run the following command in the terminal:

flutter pub run flutter_launcher_icons:main

The Flutter Launcher Icons package will generate iOS icons with the specified sizes. Check the iOS platform folder to see the updated icons.

Example 9: Generating Icons for Specific Platforms

If you only want to generate launcher icons for specific platforms, you can configure Flutter Launcher Icons accordingly. Here's how:

1. Open the pubspec.yaml file in your project's root directory.
2. Add the following configuration under the flutter_icons section:

flutter_icons:
  android: true
  ios: false
  image_path: "assets/icons/icon.png"

3. Replace "assets/icons/icon.png" with the path to your app's icon.
4. Save the file and run the following command in the terminal:

flutter pub run flutter_launcher_icons:main

The Flutter Launcher Icons package will generate launcher icons only for the specified platforms. Check the respective platform folders to see the updated icons.

Example 10: Running the Package with Arguments

You can also run the Flutter Launcher Icons package with command-line arguments to customize the icon generation process. Here's an example:

flutter pub run flutter_launcher_icons:main --help

Running the command with the --help argument will display a list of available command-line options and their descriptions.

Conclusion

In this tutorial, we explored various examples of how to use the Flutter Launcher Icons package to generate and customize app launcher icons for your Flutter project. We covered generating icons, customizing icon colors, specifying icon sizes, providing iOS icon assets, and more. Experiment with the package to create visually appealing launcher icons for your Flutter apps.