When you create a Flutter app, by default the launcher icon is created with the Flutter logo. When releasing your app to the public, you must replace the Flutter logo with your own designed icon. So in this tutorial, we’ll learn how to change launcher icon in Flutter.
Here’s what we’ll cover:
What is an Application Launcher Icon
The Application launcher icon is an icon that represents your application. Every phone has a launcher app. When you open it, it shows the launcher icons for all the installed apps. The launcher icon acts as an entry point to your app and helps you promote your brand.
Here’s how it looks:
Creating an Icon
If you are running out of time or don’t have a budget to hire a designer to create a launcher icon for your app, you can create one on your own using the free online tool.
If you already have the launcher icon created, you can skip to the next section.
Here are the steps to create:
Step 1: Open this free online tool.
Step 2: Under the Clipart section, select any icon.
Step 3: Scroll down and find the Color section. Click on the box below and change the color of the icon.
Step 4: Find the Background color property below and change the background color of the icon.
Step 5: To add the shadow effect, find the Effect property and click on the Cast Shadow tab.
Step 6: Click on the Download button at the top right side of your screen.
Change Application Launcher Icon in Flutter
We are going to change the app icon using a package called flutter_launcher_icons. It’s a recommended approach that does all the heavy lifting of updating the app launcher icons for different platforms. It’s flexible and allows you to set the adaptive icons as well.
Here are the steps to change application launcher icon in Flutter:
Step 1: Inside the pubspec.yaml file, Add the flutter_launcher_icons package under the dev_dependencies (and not under the dependencies)
It should look like this:
dev_dependencies: flutter_test: sdk: flutter flutter_launcher_icons: "^0.9.2" //Make sure to use latest version
Step 2: Create a folder called asset in the root directory. Inside the asset folder create one more folder called icons and place your launcher icon inside.
Hint: It’s recommended to use a higher resolution image, for example, the image of 1024*1024.
Step 3: Add flutter_icons inside the pubspec.yaml to reference the new launcher icon.
Hint: Make sure to add it at the same indent level of dev_dependencies.
It should look like this:
dev_dependencies: flutter_test: sdk: flutter flutter_launcher_icons: "^0.9.2" flutter_icons: android: "launcher_icon" ios: true image_path: "asset/icons/pet.png"
- Setting the ios: true will update the app icon for the ios app as well.
- Replace the pet.png with the name of your icon.
Step 4: Run the package using the following command.
flutter pub get
flutter pub run flutter_launcher_icons:main
Step 5: Run the app and verify the new launcher icon updated in the launcher app for both Android and iOS.
Hint: If you still see the old icon, completely stop the app and re-run.
That’s it. I hope you find this article useful 🙂
In this tutorial, we learned what is an application launcher icon, how to create one and change application launcher icon in Flutter.