Saturday, October 9, 2021

Change Launcher icon for Flutter apps for both iOS and Android using Android Studio on macOS

 

Create your own icon (preferably 1024x1024 size)

You may use the following tools:

    Android Icon Generator  https://romannurik.githu.io/AndroidAssetStudio

    App Icon Generator https://appicon.co

Using App Icon Generator

Goto https://appicon.co

Drag & drop your icon to this App Icon Generator site.

Select all the platforms to be generated

it will generate and download the file AppIcons.zip

The compressed file will include folders android (for Android) and Assets.xcassets (for iOS)

Using the generated icons:

Inside the zip file are the following for Android: 

android 

android>mipmap-mdpl (smallest)

anndroid>mipmal-xxxhdpi (largest)

Inside the zip file are the following for iOS:  

Assets.xcassets

Assets.xcassets>

Assets.xcassets>


For Android:

Right-click the Android Studio>(project folder)>android/app/src/main/res folder, select Open in>Finder







Select all folders which name that matches those in the compressed file for android and throw them in the trash, then replace those with the folders in the compressed file for android.
copy all folders in AppIcons.zip>android/(folders) to (project)>android/app/main/src/res/

To adjust the image/icon, You can open image asset

Right click android and select Flutter>Open Android Module in Android Studio

Once android window is open, you may choose res and right click to choose Image Asset




Once opened you can pick the Source Asset/Path for the starting image once Finder dialog open , you can select the app_icon.png you get to resize the icon (e.g. for rounded icon, square etc)

once done adjusting click next, image asset will replace existinng with new one by clicking finish


For iOS:

Right-click the Android Studio>(project folder)>ios/Runner/Assets.xcassets folder, select Open in>Finder

Once revealed, delete (cmd+backspace) the Assets.xcassets from the runner folder 

Once deleted, Select the Assets.xcassets folder from the AppIcon.zip file and drag to the destination Runner folder of the project


Other Option : Using flutter_launcher_icons package

Create icon

Create folder for the new icon in the project directory e.g. (project folder)/assets/icon

Add icon to the Android Studio>(project folder)>/assets/icon/ folder

Then in (project folder)/pubspec.yaml add the following (except the greyed out lines ie flutter_test)

dev_dependencies:
flutter_launcher_icons: ^0.9.2

flutter_test:
sdk: flutter


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

Replace "/assets/icon/icon.png" with the name of your icon

Save edited pubspec.yaml.

Execute Pub get from Android studio (when in pubspec.yaml editor) or via terminal type

> flutter pub get

Running "flutter pub get" in flutter_app...                       739ms

Process finished with exit code 0

Open Terminal from Android Studio (Option+F12) or from Android Studio / Tool Window, click Terminal
Execute the following command:

> flutter pub run flutter_launcher_icons:main

  ════════════════════════════════════════════
     FLUTTER LAUNCHER ICONS (v0.9.1)                               
  ════════════════════════════════════════════
  
• Creating default icons Android
• Overwriting the default Android launcher icon with a new icon

WARNING: Icons with alpha channel are not allowed in the Apple App Store.
Set "remove_alpha_ios: true" to remove it.

• Overwriting default iOS launcher icon with new icon

✓ Successfully generated launcher icons

(app project folder)/(app name) took 6s 
Done.





No comments: