How to change the application launcher icon on Flutter Ask Question

0 votes

When I create an app with a flutter create command, the flutter logo is used as an application icon for both platforms.

If I want to change the app icon, shall I go to both platforms directories and replace images there?, by platforms directories I mean myapp/ios/Runner/Assets.xcassets/AppIcon.appiconset for iOS and myapp/android/app/src/main/res for Android.

Or is it possible to define an image as a Flutter Asset and the icons are generated somehow?.

Mar 1, 2023 in Android by Ashwini
• 5,430 points
11,341 views

2 answers to this question.

0 votes

Yes, you can change the launcher icon in Flutter by replacing the images in the platform-specific directories, but there is an easier way to do it using a package called flutter_launcher_icons.

Here's how you can use this package to change the launcher icon in your Flutter app:

  • Add the flutter_launcher_icons package to your pubspec.yaml file:

dev_dependencies: flutter_launcher_icons: "^0.9.2"
  • Run flutter pub get to install the package.

  • Create a new folder in your project root directory called icons.

  • Add your app icon image files to the icons folder. You should include icon files in different sizes for different screen densities. For example, for Android, you should include icon files in the following sizes: drawable-mdpi, drawable-hdpi, drawable-xhdpi, drawable-xxhdpi, and drawable-xxxhdpi. For iOS, you should include icon files in the following sizes: Icon-App-20x20@1x.png, Icon-App-20x20@2x.png, Icon-App-20x20@3x.png, Icon-App-29x29@1x.png, Icon-App-29x29@2x.png, Icon-App-29x29@3x.png, Icon-App-40x40@1x.png, Icon-App-40x40@2x.png, Icon-App-40x40@3x.png, Icon-App-60x60@2x.png, Icon-App-60x60@3x.png, and Icon-App-76x76@1x.png.

  • Add the following configuration to your pubspec.yaml file:

flutter_icons:
  image_path: "icons/icon.png"
  android: true
  ios: true
  remove_alpha_ios: true
  resize_behavior: shrink_only
  • The image_path property should point to your app icon image file in the icons folder. You can also configure the package to generate different icons for Android and iOS by setting the android and ios properties to true. The remove_alpha_ios property is used to remove the alpha channel from the iOS icons, which is required by Apple's guidelines. The resize_behavior property is used to control how the package resizes the icon image files.

  • Run flutter pub run flutter_launcher_icons:main to generate the new launcher icons.

That's it! Now you should see your new app icon when you run your Flutter app on both Android and iOS.

To know more, join our Flutter Certification Course today.

answered Mar 1, 2023 by vishalini
0 votes
how to change the app icon in flutter
answered Nov 29, 2023 by anonymous