Flutter Launcher Icons: A Comprehensive Guide

Published on by Flutter News Hub

Flutter Launcher Icons: A Comprehensive Guide

Flutter Launcher Icons is a command-line tool that simplifies the process of updating your Flutter app's launcher icon. It offers customization options for multiple platforms, including Android, iOS, Web, Windows, and macOS.

Setup

1. Configuration File:

Add a Flutter Launcher Icons configuration to your pubspec.yaml file or create a separate file named flutter_launcher_icons.yaml.

flutter_launcher_icons:
  android:
    "launcher_icon"
  ios: true
  image_path: "assets/icon/icon.png"

2. Run the Package:

Execute the following command to generate the launcher icons:

flutter pub get
flutter pub run flutter_launcher_icons

Attributes

Global:

  • image_path: Path to the icon image file.

Android:

  • android: Boolean to override existing icons (default: true).
  • image_path_android: Optional path to platform-specific icon image file.
  • min_sdk_android: Specify the minimum Android SDK version.
  • adaptive_icon_background: Color or image background for adaptive icons.
  • adaptive_icon_foreground: Image foreground for adaptive icons.

iOS:

  • ios: Boolean to override existing icons (default: true).
  • image_path_ios: Optional path to platform-specific icon image file.
  • remove_alpha_ios: Boolean to remove alpha channel from iOS icons.

Web:

  • web: Boolean to generate icons for web (default: false).
  • image_path: Path to the web icon image file.
  • background_color: Background color for the web manifest.
  • theme_color: Theme color for the web manifest.

Windows:

  • windows: Boolean to generate icons for Windows (default: false).
  • image_path: Path to the Windows icon image file.
  • icon_size: Icon size for Windows (range: 48-256, default: 48).

macOS:

  • macos: Boolean to generate icons for macOS (default: false).
  • image_path: Path to the macOS icon image file.

Troubleshooting

Icon Color Mismatch

  • Make sure to use #AARRGGBB for colors instead of ##AABBGGRR.

Image Foreground Size

  • Use a foreground image with appropriate padding to achieve the desired result.

Dependency Compatibility

  • If encountering dependency conflicts, try temporarily overriding the dependency version.

Example

# flutter_launcher_icons.yaml

android:
  "launcher_icon"
  image_path_android: "assets/images/android_icon.png"
  adaptive_icon_background: "#ffffff"
  adaptive_icon_foreground: "assets/images/android_icon_foreground.png"

ios:
  true
  image_path_ios: "assets/images/ios_icon.png"
  remove_alpha_ios: true

web:
  true
  image_path: "assets/images/web_icon.png"
  background_color: "#000000"
  theme_color: "#ffffff"

windows:
  true
  image_path: "assets/images/windows_icon.png"
  icon_size: 64

macos:
  true
  image_path: "assets/images/macos_icon.png"

Conclusion

Flutter Launcher Icons is a powerful tool that empowers developers to customize their app's launch icons across multiple platforms with ease. By following the steps outlined above, you can easily update your app's branding and maintain consistency across different operating systems.

Flutter News Hub