flutter_launcher_icons: 5-Step Guide to Change App Icons in Flutter

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 to create and change app icons in Flutter with flutter_launcher_icons.

Here’s what we’ll cover:

• Creating an Icon
• Change Application Launcher Icon in Flutter

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:

1. Open this free online tool.
2. Under the Clipart section, select any icon.
3. Scroll down and find the Color section. Click on the box below and change the color of the icon.
4. Find the Background color property below and change the background color of the icon.
5. To add the shadow effect, find the Effect property and click on the Cast Shadow tab.
6. Click on the Download button at the top right side of your screen.

Change app icons in Flutter with flutter_launcher_icons

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 app icons in Flutter with flutter_launcher_icons:

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

and then…

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 🙂

While changing app icons in Flutter using flutter_launcher_icons may seem simple, sometimes configuration errors can hold you back. If you’re facing an error such as ‘Dart SDK is not Configured in Flutter‘, here is the quick guide to help you out.

Conclusion

In this tutorial, we learned how to create and change app icons in Flutter with flutter_launcher_icons.

FAQs

How to change app icon in Flutter android studio?

1. First, you’ll need to install the flutter_launcher_icons package in your Flutter project. You can do this by adding the package to your pubspec.yaml file, then running flutter packages get in your terminal.
2. Once you have installed the package, create a new folder in your project directory called icons.
3. Inside the icons folder, create a new file called icon.png with a resolution of 192×192 pixels. This will be your app’s new icon.
4. Next, open your project’s pubspec.yaml file and add the following code at the bottom:yamlCopy codeflutter_icons: image_path: "icons/icon.png" android: true ios: true This code tells the flutter_launcher_icons package where to find your new icon and which platforms to update the icon for.
5. Save your pubspec.yaml file and run flutter pub get in your terminal to update your project with the new changes.
6. Finally, run the following command in your terminal to generate the new app icons:arduinoCopy codeflutter pub run flutter_launcher_icons:main This command will generate new app icons for both Android and iOS.
7. Build and run your app to see your new icon in action!

What is the format of app icon in Flutter?

The format of the app icon in Flutter is a PNG (Portable Network Graphics) file with a transparent background. The recommended size for the app icon is 192×192 pixels, although you can use larger or smaller sizes if needed.

Once you have created your app icon in the proper format and size, you can use the flutter_launcher_icons package in Flutter to easily set it as the icon for your app.

What is size of app icon Flutter?

The size of the app icon in Flutter depends on the platform and the device it is displayed on. Generally, you need to provide different sizes of your app icon for different platforms and devices, ranging from 48×48 pixels to 1024×1024 pixels. flutter_launcher_icons package automatically generates all the necessary sizes for both Android and iOS platforms based on a single high-resolution image.

What is adaptive icon Flutter?

Adaptive icons in Flutter are a way to create app icons that can adapt to different device styles and themes on Android devices. This means that your app icon will look great on any device, regardless of the device’s style or theme. In Flutter, the flutter_launcher_icons package provides built-in support for adaptive icons, making it easy to generate adaptive icons along with all other required app icon sizes. Adaptive icons consist of two layers: a foreground layer that represents the app icon, and a background layer that represents the device’s system icon, such as the phone or message icon.

Also read,