Update Basic Configs

1. Download the repository and develop your APP on top of it.

Click here to download the repository.

How to change the Package Name/ Bundle Identifier, and App Name?

Let's say you want to change the package name/ Bundle identifier from com.webreinvent.vaahflutter to domain.company.appname.

flutter create --org domain.company appname

For Android

Change package name

Step 1:

Change the package name in your AndroidManifest.xml (locations: root/android/app/src/main/AndroidManifest.xml, root/android/app/src/debug/AndroidManifest.xml and root/android/app/src/profile/AndroidManifest.xml, according what environment you want to deploy).

From

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

To

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="domain.company.appname">

Step 2:

In your build.gradle (root/android/app/build.gradle) file inside the app; change applicationId

From

android {
    ...
    defaultConfig {
        // Specify your unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.webreinvent.vaahflutter"
        ...
    }
    ...
}

To

android {
    ...
    defaultConfig {
        // Specify your unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "domain.company.appname"
        ...
    }
    ...
}

Step 3:

Change the package name in root/android/app/src/main/kotlin/com/webreinvent/vaahflutter/MainActivity.kt

From

package com.webreinvent.vaahflutter

To

package domain.company.appname

Step 4:

Change the directory name

From

root/android/app/src/main/kotlin/com/webreinvent/vaahflutter/

To

root/android/app/src/main/kotlin/domain/company/appname/

Change the app name

If you want to change your app's name that is displayed everywhere,

Change the android:label in your AndroidManifest.xml (locations: root/android/app/src/main/AndroidManifest.xml, root/android/app/src/debug/AndroidManifest.xml and root/android/app/src/profile/AndroidManifest.xml, according what environment you want to deploy).

From

<application
        android:label="VaahFlutter"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">

To

<application
        android:label="Your App Name"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">

For iOS

Change bundle identifier

Change the CFBundleIdentifier (bundle identifier) value in your root/ios/Runner/Info.plist file.

If you check the value is not hardcoded there and is coming from the variable called PRODUCT_BUNDLE_IDENTIFIER

<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>

So to change the value of that variable search for PRODUCT_BUNDLE_IDENTIFIER in the project you will get it's been used 3 times (for debug, profile, and release mode) in ios/Runner.xcodeproj/project.pbxproj file. At all those 3 places change it

From

PRODUCT_BUNDLE_IDENTIFIER = com.webreinvent.vaahflutter;

To

PRODUCT_BUNDLE_IDENTIFIER = domain.company.appname;

Change app name

Change the CFBundleDisplayName (bundle display name) value in your root/ios/Runner/Info.plist file.

From

<key>CFBundleDisplayName</key>
<string>VaahFlutter</string>

To

<key>CFBundleDisplayName</key>
<string>Your App Name</string>

How to change the package name and description in pubspec.yaml?

Change name and description properties in root/pubspec.yaml

From

name: vaahflutter
description: VaahFlutter, is all about app essentials.

To

name: your_app_name
description: Your app description.

2. Use VaahFlutter in your new/existing project.

Copy core directories and packages in your project.

• root/assets
• root/lib
• root/packages
• root/pubspec.yaml

Check the documentation for how to use different components

• Essesntials
• Core
• Vaah Components

3. Change App Icon

We use flutter_launcher_icons to change app icon.

Step 1: Prepare the Source Image

Step 2: Configure the Pubspec.yaml File

In your Flutter project, open the pubspec.yaml file. This file contains metadata and dependencies for your app. To generate app icons automatically, you'll need to add the flutter_launcher_icons package as a dev dependency.

Step 3: Prepare the Icon Generation Configuration

Create a new file in the root of your project called flutter_launcher_icons.yaml. In this file, you will define the configuration for generating app icons.

Add the following content to flutter_launcher_icons.yaml:

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

In the above configuration, make sure to replace "assets/icon.png" with the path to your high-resolution source image.

Step 4: Generate App Icons

Now that you have configured the icon generation, run the following command in your project's root directory to generate the app icons:

flutter pub run flutter_launcher_icons:main

Step 5: Test the Generated Icons

Build and run your Flutter app on different devices or simulators to ensure that the generated app icons appear correctly and are properly scaled for each platform.

4. Change Splash Screen

We use flutter_native_splash to change launch screen.

Step 1: Prepare the Splash Screen Image

Generally I recommend showing logo on top of colored container (full screen). So I just use logo for Prepare the Splash Screen Image step.

Step 2: Configure the Pubspec.yaml File

In your Flutter project, open the pubspec.yaml file. This file contains metadata and dependencies for your app. To generate a splash screen automatically, you'll need to add the flutter_native_splash package as a dev dependency.

Step 3: Prepare the Splash Screen Generation Configuration

Create a new file in the root of your project called flutter_native_splash.yaml. In this file, you will define the configuration for generating the splash screen.

Add the following content to flutter_native_splash.yaml:

flutter_native_splash:
  image: "assets/icon.png"
  color: "ffffff"

In the above configuration, make sure to replace "assets/icon.png" with the path to your high-resolution splash screen image. Additionally, you can customize the "color" value to match your app's branding.

Step 4: Generate the Splash Screen

Now that you have configured the splash screen generation, run the following command in your project's root directory to generate the splash screen:

flutter pub run flutter_native_splash:create

Step 5: Test the Splash Screen

Build and run your Flutter app to see the generated splash screen in action. The splash screen will appear briefly when launching the app and then transition to your app's main screen.