Debug School

rakesh kumar
rakesh kumar

Posted on

Flutter Error:The app’s icon or title when installed on the device differs from what is displayed in the Play Store

Errors

Image description

Creating a custom app icon for your Flutter application involves a few steps. Here is a detailed guide:

Step 1: Design Your Icon
Design Software: Use design software like Adobe Illustrator, Photoshop, or free alternatives like GIMP or Inkscape to design your icon.
Dimensions: Create your icon in various sizes. The key sizes you'll need are:

48x48 pixels
72x72 pixels
96x96 pixels
144x144 pixels
192x192 pixels
512x512 pixels (high-res icon for Play Store)
Enter fullscreen mode Exit fullscreen mode

Export: Export the icon in PNG format.
Step 2: Add Flutter Launcher Icons Package
Add Dependency: Open your pubspec.yaml file and add the flutter_launcher_icons package.

 $ flutter pub add flutter_launcher_icons
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

dependencies:
  flutter:
    sdk: flutter
  flutter_launcher_icons: ^0.9.2


dev_dependencies:
  flutter_launcher_icons: ^0.9.2

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"
  adaptive_icon_background: "#FFFFFF"
  adaptive_icon_foreground: "assets/icon/icon.png"
Enter fullscreen mode Exit fullscreen mode

Step 3: Prepare Your Icon Files
Assets Folder: Create a folder called assets/icon in the root directory of your Flutter project.
Copy Icons: Copy your icon PNG files into the assets/icon folder. Ensure the main icon is named icon.png.
Step 4: Configure pubspec.yaml
Asset Path: Make sure the pubspec.yaml file points to the correct asset path for your icons.

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"
  adaptive_icon_background: "#FFFFFF"
  adaptive_icon_foreground: "assets/icon/icon.png"
Enter fullscreen mode Exit fullscreen mode

Step 5: Generate Icons
Generate Icons: Run the following command in your terminal to generate the icons.

flutter pub get
flutter pub run flutter_launcher_icons:main
Enter fullscreen mode Exit fullscreen mode

Step 6: Verify Icons
Check Icons: After running the command, the icons will be automatically generated and placed in the appropriate directories (android/app/src/main/res and ios/Runner/Assets.xcassets).
Build and Test: Build your app to ensure the icons are correctly displayed.

flutter build apk
flutter build ios
Enter fullscreen mode Exit fullscreen mode

Step 7: Update Play Store Listing (if necessary)
Update Icon: If you updated your app icon, make sure to update the high-res icon in your Google Play Console as well.
Example Files Structure

my_flutter_app/
  ├── android/
  ├── assets/
  │   └── icon/
  │       └── icon.png
  ├── ios/
  ├── lib/
  ├── pubspec.yaml
Enter fullscreen mode Exit fullscreen mode

Example pubspec.yaml Configuration

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icon/icon.png"
  adaptive_icon_background: "#FFFFFF"
  adaptive_icon_foreground: "assets/icon/icon.png"
Enter fullscreen mode Exit fullscreen mode

By following these steps, you should have a custom app icon integrated into your Flutter project. If you have any specific questions or run into issues, feel free to ask!

then verify after running comaand

flutter pub run flutter_launcher_icons:main
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

When using the flutter_launcher_icons package to generate your app icons, the necessary changes to the Android manifest are usually handled automatically. However, it's still good to understand what changes might be involved and to manually verify if needed.

Android Manifest Changes
Icon and Round Icon: The Android manifest file (android/app/src/main/AndroidManifest.xml) should specify the icon and round icon for your app. This is usually updated automatically by the flutter_launcher_icons package, but you can manually check and ensure it looks something like this:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.my_flutter_app">

    <application
        android:name=".MainApplication"
        android:label="my_flutter_app"
        android:icon="@mipmap/ic_launcher"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:allowBackup="true"
        android:theme="@style/LaunchTheme">

        <!-- Other configurations -->

    </application>
</manifest>
Enter fullscreen mode Exit fullscreen mode

Verifying the Changes
After running the flutter_launcher_icons commands, check the following locations to ensure the icons have been generated correctly:

res/mipmap: The generated icons should be placed in various mipmap directories like mipmap-mdpi, mipmap-hdpi, mipmap-xhdpi, mipmap-xxhdpi, and mipmap-xxxhdpi.

android/app/src/main/res/mipmap-mdpi/ic_launcher.png
android/app/src/main/res/mipmap-hdpi/ic_launcher.png
android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
Enter fullscreen mode Exit fullscreen mode

Adaptive Icons: If you're using adaptive icons, ensure that the ic_launcher_foreground.xml and ic_launcher_background.xml files are correctly generated and located in the drawable directories.

android/app/src/main/res/drawable/ic_launcher_foreground.xml
android/app/src/main/res/drawable/ic_launcher_background.xml
Enter fullscreen mode Exit fullscreen mode

Top comments (0)