How do add a logo in Flutter?

 How do I add a logo in Flutter?

Flutter SDK is an open-source software development kit for building beautiful UI which is natively compiled. When we create a Flutter Project, it comes with the default Flutter icon. In order to get the app published in stores like Google Play Store, Apple App Store, etc the default icon can be changed. In this article, we will look into a few possible approaches to achieve the same. To replace the default Flutter logo (splash screen icon) and set your own app launcher icon and splash screen, follow these two steps:

Every new flutter app comes with a flutter logo as its default app icon and changing this icon is pretty easy for all flutter-supported platforms. All you have to do is to follow a few simple steps.

Asset bundling

#

The assets subsection of the flutter section specifies files that should be included with the app. Each asset is identified by an explicit path (relative to the pubspec.yaml file) where the asset file is located. The order in which the assets are declared doesn't matter. The actual directory name used (assets in first example or directory in the above example) doesn't matter.

During a build, Flutter places assets into a special archive called the asset bundle that apps read from at runtime.

✅ 1. Set App Icon (Launcher Icon)

Use the official package: flutter_launcher_icons

🔧 Step-by-step:

a. Add to pubspec.yaml:

dev_dependencies:
  flutter_launcher_icons: ^0.13.1

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"

Replace assets/icon/app_icon.png with your logo path (512x512 recommended).

b. Run the command:

flutter pub get
flutter pub run flutter_launcher_icons:main

This will automatically update icons for Android and iOS.

✅ 2. Set Splash Screen (Remove Flutter Logo)

Use: flutter_native_splash

🔧 Step-by-step:

a. Add to pubspec.yaml:

dev_dependencies:
  flutter_native_splash: ^2.3.3

flutter_native_splash:
  color: "#ffffff"
  image: assets/icon/splash.png
  android: true
  ios: true

Customize the color and image path as per your splash design.

b. Run the command:

flutter pub get
flutter pub run flutter_native_splash:create

This generates native splash screens and removes the Flutter logo.

✅ 3. Add Image to pubspec.yaml

Ensure your image is declared:

flutter:
  assets:
    - assets/icon/app_icon.png
    - assets/icon/splash.png

✅ 4. Clean and Rebuild

After changing icons and splash screens:

flutter clean
flutter pub get
flutter run

Flutter apps can include both code and assets (sometimes called resources). An asset is a file that is bundled and deployed with your app, and is accessible at runtime. Common types of assets include static data (for example, JSON files), configuration files, icons, and images (JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, and WBMP).