Aller au contenu principal

CUSTOMIZATION GUIDE

Modify App Icon and Splash Screen

Codika makes it very simple to modify the app icon and the splash screen with your own assets. During project creation, Codika automatically generates the configuration files and uses default assets using the Codika branding. In this guide, we'll show you how to modify the app icon and splash screen.

Under the hood, Codika uses Flutter Launcher Icons and Flutter Native Splash to generate the icons and splash screen. For more detailed information please refer to the official documentations of those packages.

Modify App Icon​

The assets to be changed are located in the assets/images/app_icon/ folder. You'll see 9 different assets corresponding to different use cases. Make sure to keep the same naming convention for the assets.

We can't use the same assets for all use cases, because the safe areas of the icons are different for each platform. When you modify the app icon, please make sure to use the same assets dimensions and structure as the original assets.

assets/
  images/
    app_icon/
      ├── android_app_icon_adaptive_background.png
      ├── android_app_icon_adaptive_foreground.png
      ├── android_app_icon.png
      ├── ios_app_icon_dark_transparent.png
      ├── ios_app_icon_grayscale.png
      ├── ios_app_icon.png
      ├── macos_app_icon.png
      ├── web_app_icon.png
      └── windows_app_icon.png

The configuration file provided to the flutter_launcher_icons package is codika/config/app_icon.yaml.

Modify Splash Screen​

The assets to be changed are located in the assets/images/splash_screen/ folder. You'll see 12 different assets corresponding to different use cases. Make sure to keep the same naming convention for the assets.

assets/
  images/
    splash_screen/
      ├── android_12_logo_dark.png
      ├── android_12_logo_light.png
      ├── android_logo_dark.png
      ├── android_logo_light.png
      ├── background_dark.png
      ├── background_light.png
      ├── branding_dark.png
      ├── branding_light.png
      ├── ios_logo_dark.png
      ├── ios_logo_light.png
      ├── logo_dark.png
      └── logo_light.png

Propagate Changes​

To update the assets, you can use the codika update-visuals command. This command will run the flutter_launcher_icons and flutter_native_splash packages to generate the assets.

codika update-visuals