How to Change the Application Launcher Icon in Flutter

19 December 2024 Stephan Petzl Leave a comment Tech-Help

When you create a Flutter application using the flutter create command, the default launcher icon is the Flutter logo. Changing this icon to your custom design involves a few steps. This guide will walk you through the process of customizing the app launcher icon for both iOS and Android platforms.

Using Flutter Launcher Icons Package

The most efficient method to change the launcher icon is through the Flutter Launcher Icons package. This tool allows you to automatically generate launcher icons for both platforms, simplifying the process significantly.

Step-by-Step Guide

1. Add the Package: Open your pubspec.yaml file and add the following dependency:

   dev_dependencies:
     flutter_launcher_icons: "^0.13.1"

2. Specify the Icon: Still in pubspec.yaml, add the configuration for the icon path and platforms:

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

3. Install Dependencies: Run the command flutter pub get in your terminal to fetch the package.
4. Generate Icons: Execute the following command to generate the launcher icons:

   flutter pub run flutter_launcher_icons:main

5. Rebuild Your App: After the icons are generated, rebuild your app to see the changes.

Alternative Manual Method

If you prefer to set the launcher icon manually, you can follow these steps:

For Android

• Use Android Asset Studio to create your launcher icons.
• Replace the generated icons in android/app/src/main/res/mipmap-* directories.
• Ensure the AndroidManifest.xml file references the correct icon name.

For iOS

• Use a tool like App Icon Generator to create your iOS app icons.
• Replace the icons in ios/Runner/Assets.xcassets/AppIcon.appiconset directory.
• Verify the icon changes by running your app in the iOS simulator.

Conclusion

Changing the launcher icon in Flutter can be effortlessly achieved using the Flutter Launcher Icons package. Whether you choose the automated or manual method, having a customized icon enhances your app’s identity and professionalism.

Enhancing Your App Testing with Repeato

While customizing your app, consider streamlining your testing process with Repeato, a no-code test automation tool for iOS and Android. Repeato allows you to efficiently create, run, and maintain automated tests, ensuring your app’s functionality remains intact after changes like updating the launcher icon. Its computer vision and AI capabilities make it particularly fast and easy to use, saving you valuable development time.

Check it out!

Like this article? there’s more where that came from!

• How to Remove the Debug Banner in Flutter
• How to Use Hexadecimal Color Strings in Flutter
• Resolving the “cmdline-tools component is missing” Error in Flutter Development
• How to Change the Application Launcher Icon in Flutter
• Adding a Border to a Text Widget in Flutter