Episode 1: Launcher Icons package

Season 3: Useful Packages

Dec 04, 2023

Introduction

Welcome to the exciting world of Flutter development! In this blog post, we're going to explore how to personalize your Flutter application by setting custom launcher icons using the flutter_launcher_icons package. This tutorial is perfect for both beginners and seasoned Flutter developers looking to add a unique touch to their apps.

Why Change Your App's Launcher Icon?

When you create a new Flutter project, it comes with the default Flutter icon. While this icon is recognizable, giving your app a unique icon is crucial for branding and user recognition. This is where the flutter_launcher_icons package comes in handy, offering a simple and effective way to customize your app’s icon for both iOS and Android platforms.

Step 1: Setting up the Package

To get started, you need to add the flutter_launcher_icons dependency to your project. Open your pubspec.yaml file and under dev_dependencies, add:

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: latest_version

Then, run flutter pub get in your terminal to fetch the latest version of the package.

Step 2: Preparing Your Icon

Before proceeding, make sure you have a squared icon, ideally 1024x1024 pixels, to ensure high quality across different devices. This icon will represent your app on various platforms.

Step 3: Configuring the Icons

Next, configure your icons in the pubspec.yaml file. Under the flutter section, add the flutter_icons configuration like so:

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

This configuration will generate icons for both Android and iOS platforms from the specified image_path.

Step 4: Generating the Icons

Now for the exciting part! Run the command flutter pub run flutter_launcher_icons:main in your terminal. You'll see logs indicating the successful creation of icons for each platform.

Step 5: Verifying the Icons

After generating the icons, run your app on both Android and iOS devices or emulators. You should now see your custom launcher icon, showcasing your app's unique identity!

Advanced Configuration (Optional)

For those interested in more detailed customization, the flutter_launcher_icons package offers advanced configurations. You can specify individual paths for iOS and Android, adapt adaptive icons for Android, and more. Here’s an example:

flutter_icons:
  android: "launcher_icon"
  ios: "iosIcon"
  image_path_android: "assets/android_icon.png"
  image_path_ios: "assets/ios_icon.png"

Explore the package documentation for a comprehensive understanding of all its capabilities.

Conclusion

Congratulations! With just a few steps, you’ve successfully set a custom launcher icon for your Flutter app, giving it a unique and professional look.