Flutter and Java JDK Setup Guide (Step-by-Step)

Follow the steps below based on your Operating System to properly install and configure Flutter.

Windows Setup

Step 1: Download Flutter SDK

• Go to: Download Flutter
• Download ZIP file
• Extract to C:\flutter

Step 2: Set Environment Path (Windows)

Step 2.1: Locate Flutter Folder

• After downloading Flutter SDK, extract it to:

• Inside this folder, locate the bin directory:

Step 2.2: Open Environment Variables

• Right-click on This PC or My Computer
• Select Properties
• Click Advanced system settings
• Click Environment Variables

Step 2.3: Edit System PATH

• Under System Variables, find Path
• Select it and click Edit
• Click New
• Add the following path:

• Click OK → OK → OK to save changes

Step 2.4: Restart Terminal

• Close all Command Prompt or PowerShell windows
• Open a new terminal

Step 2.5: Verify Installation

• If Flutter is configured correctly, you will see setup details

Step 3: Install Java JDK

Step 3.1: Download Java JDK

• Go to the official Oracle website
• Download Java JDK 22 for your operating system
• Run the installer

Step 3.2: Install Java JDK

• Follow the installation wizard
• Keep default settings (recommended)
• After installation, note the install location

Step 3.3: Set JAVA_HOME Environment Variable

• Right-click on This PC or My Computer
• Select Properties
• Click Advanced system settings
• Click Environment Variables
• Under System Variables, click New

• Click OK

Step 3.4: Add JAVA_HOME to Path

• In System Variables, find Path
• Click Edit
• Click New
• Add the following:

• Click OK → OK → OK to save changes

Step 3.5: Verify Java Installation

• If installed correctly, it will display the Java version

Step 4: Install Android Studio

• Download Android Studio
• Install Android SDK
• Install Emulator
• After installation, Install the Flutter and Dart plugins through “Preferences” -> “Plugins” -> “Marketplace.”

Step 5: Verify Setup

macOS Setup

Step 1: Download Flutter SDK

• Download Flutter from the official website
• Extract it to your home directory:

Step 2: Set PATH (Permanent)

• Open Terminal
• Edit your shell configuration file:

• Add the following line at the end:

• Save and apply changes:

Step 3: Install Xcode

• Install Xcode from the App Store
• Open Xcode once and accept the license agreement

Step 4: Install Android Studio

• Download and install Android Studio
• Install Android SDK
• Setup Android Emulator
• After installation, Install the Flutter and Dart plugins through “Preferences” -> “Plugins” -> “Marketplace.”

Step 5: Install CocoaPods (Required for iOS)

Step 6: Verify Setup

• Fix any ❌ errors shown in the output

Linux Setup

Step 1: Download Flutter SDK

• Download Flutter from the official website
• Extract it to your home directory:

Step 2: Set PATH (Permanent)

• Open Terminal
• Edit your shell configuration file:

• Add the following line at the end:

• Save and apply changes:

Step 3: Install Required Packages

Step 4: Set Permissions

Step 5: Install Android Studio

• Download and install Android Studio
• Install Android SDK
• Setup Emulator
• After installation, Install the Flutter and Dart plugins through “Preferences” -> “Plugins” -> “Marketplace.”

Step 6: Verify Setup

• Fix any ❌ errors shown in the output

✅ Final Verification (All Operating Systems)

What to Check

• Resolve all ❌ errors shown in the output
• Ensure all required tools show ✔ success status
• Confirm Android SDK, Xcode (macOS), and dependencies are installed
• Make sure a physical device or emulator is connected

Common Issue: Android License Status Unknown

• Press y and hit Enter to accept all licenses
• Repeat until all licenses are accepted

Re-Verify Setup

• Ensure there are no remaining ❌ errors

⚙️ Advanced Troubleshooting (If Issues Persist)

• Verify that the Flutter SDK 3.41.7 is installed and up-to-date
• Ensure Android Studio is up-to-date with all required plugins installed
• Confirm Android SDK (API Level 36) is installed and properly configured
• Check that JDK 22 is correctly installed and linked
• Validate that all required environment variables are properly set
• Restart your system or terminal after making configuration changes

Flutter App Setup

This guide will help you configure and customize the XpressHive Mobile App. Follow each step carefully to successfully build your Flutter application.

Donwload source code from codecanyon and unzip it to your desired location. after that open the project in Android Studio

After extracting (unzipping) the project, open the project folder in Android Studio. This allows you to access and configure the project files properly.

Click on the Settings (⚙️ icon) in the top-right corner of Android Studio, then go to Languages & Frameworks → Flutter.

In the Flutter SDK path field, select your Flutter installation directory (for example: C:\flutter).

After setting the Flutter SDK path, click Apply and then OK. This step ensures Android Studio can detect and run Flutter properly.

Now open the terminal inside Android Studio and run the following commands:

flutter clean
flutter pub get

These commands will clean the project, install dependencies, and run the application on your device or emulator.

1. How to change package name

Update your application package name for both Android and iOS. This is required before publishing your app.

🔄 Step 1: Replace Package Name (Global Search)

Press Ctrl + Shift + R in Android Studio.

• Old package name: com.xpresshivetalent.app
• New package name: com.xpresshivetalent.example
• Click Replace All

⌨️ Step 2: Verify with Search

Press Ctrl + Shift + F and search for: com.xpresshivetalent.app

If found, replace all remaining occurrences with: com.xpresshivetalent.example

📂 Step 3: Update Kotlin Folder Structure

Navigate to:

Rename folders according to your new package name.

• Old: com/xpresshivetalent/app
• New: com/xpresshivetalent/example

📄 Step 4: Update Required Files

• android/app/src/main/kotlin/.../MainActivity.kt
• android/app/build.gradle.kts

Ensure all occurrences of com.xpresshivetalent.app are replaced.

Step 5: Update iOS Bundle Identifier

2. How to change app name

Update your application name across Android, iOS, and Flutter code. This ensures your app displays the correct name on devices and within the app.

📱 Android Configuration

Navigate to the following file:

Modify the android:label value inside the <application> tag:

iOS Configuration

Navigate to:

Update the following keys:

💻 Flutter Code Configuration

Open the following file:

Update the appName variable:

3. How to change app logo & icon

You can update your application branding by replacing the logo files and generating launcher icons. Follow the steps below carefully.

📁 Logo File Locations

• PNG Icon: assets/images/app-icon.png
• SVG Icon: assets/icons/app-icon.svg

🖼 Step 1: Replace PNG Logo

Replace the existing PNG logo with your own image.

🎨 Step 2: Replace SVG Icon

Replace the SVG icon file with your custom vector icon.

🚀 Step 3: Generate App Launcher Icon

To update the app launcher icon (for Android & iOS), generate icons using:

1. Upload your logo (recommended size: 1024x1024)
2. Select Android and iOS
3. Click Generate and download the ZIP file

After downloading, paste files into:

• Android:
  Replace all mipmap-* folders with the generated icons. Also manually update the notification icon: ic_notification.png
• iOS: ios/Runner/Assets.xcassets
  Replace the entire Assets.xcassets folder with the generated one.

4. How to change app theme (primary & accent color)

You can customize the look and feel of your Flutter application by updating the Primary and Accent colors. This will affect buttons, app bars, highlights, and overall UI appearance.

📁 Colors File Location

🎨 Modify Colors

Open the file and locate the following variables:

Update these values with your desired colors:

🖼 Example Theme Colors

5. How to change app version

You can update your application version for both Android and iOS from a single place using the pubspec.yaml file.

📁 Version File Location

⚙️ Update Version

Locate the following line in your pubspec.yaml file:

Update it based on your requirement:

📌 Version Format Explanation

• A.B.C → Version Name (User-visible version)
• +X → Build Number (Internal version code)

📱 Android Version Mapping

• A.B.C → versionName
• X → versionCode

iOS Version Mapping

• A.B.C → CFBundleShortVersionString
• X → CFBundleVersion

🖼 Version Update Example

🚀 Apply Changes

After updating the version, run one of the following commands:

6. Firebase Configuration

Firebase is required to enable Google and Facebook social login. Follow the steps below to configure it properly.

Step 1: Create Firebase Project

1. Open Firebase Console
2. Click Create a project
3. Enter project name (e.g., xpresshive)
4. Click Continue

Step 2: Enable Google Authentication

1. Go to Authentication → Sign-in method
2. Enable Google
3. Enable Facebook (optional)
4. Select support email
5. Click Save

Step 3: Facebook App Setup & Integration

Follow the steps below to create and configure your Facebook App and connect it with Firebase Authentication.

Step 1: Create Facebook App

1. Go to Meta Developer Console
2. Click My Apps → Create App
3. Enter App Name and Email
4. Click Next

Step 2: Select Use Case

1. Select Authenticate and request data from users with Facebook Login
2. Click Next

Step 3: Business Selection

1. Select your Business Account
2. Or select I don’t want to connect a business portfolio
3. Click Next

Step 4: Complete App Creation

1. Review details
2. Click Create App

Step 5: Open Dashboard Setup

1. Go to Dashboard
2. Click Customize Facebook Login

Step 6: Configure OAuth Redirect URL

1. Go to Facebook Login → Settings
2. Find Valid OAuth Redirect URIs
3. Paste Firebase Redirect URL
4. Click Save Changes

Step 7: Go to app setting -> basic

1. Go to App Setting
2. Get Facebook App ID Copy
3. Get Facebook App Secret using show button click and enter password then get secret key Copy

🔹 Step 8: Enable in Firebase

1. Go to Firebase Console → Authentication
2. Open Sign-in method
3. Enable Facebook
4. Paste App ID and App Secret
5. Click Save

Step 4: Install Firebase CLI (Automatically configured)

Before creating a Firebase app from Flutter, you must install Firebase CLI.

📌 Follow the official guide to install Firebase CLI:
🔗 Firebase CLI Installation Guide

Create a Firebase App for Flutter

1. Select Flutter as the app type
2. Click Next to continue

Log in to Firebase via Terminal

1. Open CLI Terminal (VS Code / Android Studio / Terminal)
2. Run the command below (skip if already logged in)

3. A browser window will open → Login to your Firebase account
4. Allow Firebase CLI permissions
5. When prompted, type YES and press Enter

Run Firebase Initialization Commands

1. Run the Firebase initialization command

2. Run FlutterFire configuration command

3. Press Enter to continue when prompted
4. Press Yes to confirm selections

Finalizing Firebase Setup

3. Press Nextto continue.
4. Click Continue to Console.

defaultConfig {
    applicationId "com.xpresshive.app"
}

"package_name": "com.xpresshive.app"

{
  "client_info": {
    "mobilesdk_app_id": "1:123456789:android:abc123",
    "android_client_info": {
      "package_name": "com.xpresshive.app"
    }
  },

  "api_key": [
    {
      "current_key": "AIzaSyXXXX"
    }
  ]
}

"project_info": {
  "project_id": "YOUR_PROJECT_ID"
}

"project_number": "123456789"

"storage_bucket": "project.appspot.com"

"mobilesdk_app_id":
"1:123456789:android:abc123"

"api_key": [
  {
    "current_key": "AIzaSyXXXX"
  }
]

PRODUCT_BUNDLE_IDENTIFIER = com.xpresshive.app

<key>BUNDLE_ID</key>
<string>com.xpresshive.app</string>

<key>API_KEY</key>

<key>GOOGLE_APP_ID</key>

<key>GCM_SENDER_ID</key>

<key>PROJECT_ID</key>

<key>STORAGE_BUCKET</key>

<key>BUNDLE_ID</key>

<key>CLIENT_ID</key>

static const FirebaseOptions android = FirebaseOptions(
  projectId: 'YOUR_PROJECT_ID',
  messagingSenderId: '123456789',
  storageBucket: 'project.appspot.com',
  apiKey: 'AIzaSyXXXX',
  appId: '1:123456789:android:abc123',
);

static const FirebaseOptions ios = FirebaseOptions(
  apiKey: 'AIzaSyXXXX',
  appId: '1:123456789:ios:abc123',
  messagingSenderId: '123456789',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'project.appspot.com',
  iosBundleId: 'com.xpresshive.app',
  iosClientId: '123456.apps.googleusercontent.com',
);

flutter clean
flutter pub get

Step 5: Add App (Android) Manual Configuration

1. Click Add App
2. Select Android
3. Enter your Android package name
4. Enter app nickname (optional)
5. Click Register app

1. Download the google-services.json file
2. Place it inside: android/app/

Configure firebase_options.dart Manually

If flutterfire configure does not automatically generate your Firebase configuration correctly, you can manually add the values inside firebase_options.dart.

android/app/google-services.json

lib/firebase_options.dart

// ==========================================
// ANDROID SETUP
// File Path: android/app/google-services.json
// ==========================================
static const FirebaseOptions android = FirebaseOptions(
  // 1. Find "project_info" at the top:
  projectId: 'YOUR_PROJECT_ID',          
  messagingSenderId: 'YOUR_PROJECT_NUMBER',
  storageBucket: 'YOUR_STORAGE_BUCKET',

  // 2. Find the "client" block matching your "package_name":
  apiKey: 'YOUR_CURRENT_KEY',
  appId: 'YOUR_MOBILESDK_APP_ID',
);

Step 6: Add App (iOS) Manual Configuration

1. Click Add App in Firebase console
2. Select iOS
3. Enter your iOS Bundle ID (must match Xcode project)
4. Enter app nickname (optional)
5. Click Register app
6. Download GoogleService-Info.plist
7. Open your Flutter project in android studio
8. Drag and drop the GoogleService-Info.plist into ios/Runner

Configure firebase_options.dart Manually

If flutterfire configure does not automatically generate your Firebase configuration correctly, you can manually add the values inside firebase_options.dart.

ios/Runner/GoogleService-Info.plist

lib/firebase_options.dart

// ==========================================
// IOS SETUP
// File Path: ios/Runner/GoogleService-Info.plist
// ==========================================
static const FirebaseOptions ios = FirebaseOptions(
  apiKey: 'YOUR_API_KEY',
  appId: 'YOUR_GOOGLE_APP_ID',
  messagingSenderId: 'YOUR_GCM_SENDER_ID',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  iosBundleId: 'com.your.bundle.id',

  // --- CLIENT IDS (FOR GOOGLE SIGN-IN) ---
  iosClientId: 'YOUR_IOS_CLIENT_ID',
  androidClientId: 'YOUR_ANDROID_CLIENT_ID',
);

Step 7: Add SHA1 & SHA256 Keys in Firebase (Android)

To enable Firebase Authentication (Google, Facebook, Phone, etc.), you must add SHA-1 and SHA-256 keys for your Android app.

Step 7.1: Generate Debug SHA Keys

1. Open your project in Terminal / CMD
2. Navigate to android folder:

cd android

For Windows/Mac/Linux: (Generate SHA Keys)

./gradlew signingReport

3. Copy the SHA1 and SHA256 keys from the output

Step 7.2: Add SHA Keys to Firebase

1. Go to Firebase Console
2. Open Project Settings
3. Select your Android App
4. Scroll to SHA certificate fingerprints

5. Click Add fingerprint
6. Paste your SHA1 and SHA256 keys
7. Click Save

Step 7.3: Generate Release Keystore

For Windows:

keytool -genkey -v -keystore $env:USERPROFILE\upload-keystore.jks `-storetype JKS -keyalg RSA -keysize 2048 -validity 10000 `-alias upload

For Mac/Linux:

keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA \-keysize 2048 -validity 10000 -alias upload

Note: Enter a password when prompted and remember it. Other fields are optional (press Enter to skip).

Step 7.4: Create key.properties File

Create a file named key.properties inside the android folder and add:

storePassword=YOUR_PASSWORD
keyPassword=YOUR_PASSWORD
keyAlias=release
storeFile=release-key.jks

Step 7.5: Get Release SHA Keys

keytool -list -v -keystore "release-key.jks" -alias release

1. Enter your keystore password
2. Copy SHA1 and SHA256
3. Add them in Firebase Console

Step 7.6: Add Google Play App Signing SHA (Important)

1. Go to Google Play Console
2. Navigate to Test and release → Setup → App integrity
3. Find App signing key certificate
4. Copy SHA1 and SHA256
5. Paste them into Firebase Console

🍎 iOS Configuration (Authentication Setup)

To enable Firebase Authentication in iOS, you must configure Apple Sign-In and URL schemes correctly.

Step 7.3: Enable Sign In with Apple

1. Open Xcode > Open Your Project's ios folder
2. Go to Signing & Capabilities tab
3. Add Sign In With Apple capability
4. Select a Team in the Code Signing section

Step 7.4: Mandatory iOS Configuration

Open ios/Runner/Info.plist in your code editor and add the following configurations:

iOS Client ID Setup

Add the client ID from GoogleService-Info.plist into your Info.plist file.

<key>GIDClientID</key>
<string>YOUR_CLIENT_ID</string>

iOS URL Types Setup

Update the CFBundleURLTypes attributes in the Info.plist file:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>YOUR_REVERSED_CLIENT_ID</string>
        </array>
    </dict>
</array>

Success: Firebase Authentication is now successfully configured for android & iOS.

Important: Without adding Release & Play Store SHA keys, authentication will NOT work in production.

7. Configuring the mobile API key (Base URL & API Key)

To connect your application with the backend server, you need to update the Base URL and API Key.

📁 Configuration File

🌐 Step 1: Update Base URL

Locate the baseUrl variable:

Replace it with your server URL:

🔐 Step 2: Update API Key

Locate the apiKey variable:

static const String apiKey = "YOUR_API_KEY_HERE";

Replace it with your actual API key:

static const String apiKey = "abcd1234xyz";

Mobile Settings - Manage API Key

Create API Key

To connect the mobile application securely with your backend server, you must generate an API Key from the Web Panel.

Login to your Admin Panel and navigate to:

Mobile Settings → Manage API Key

From this section, create a new API Key and use that key inside the mobile application configuration file for API verification and secure communication.

Important: Please refer to the detailed API Key setup documentation here: Click Here

• Login to the Web Panel using administrator credentials
• Go to Mobile Settings → Manage API Key
• Create a new API Key for your mobile application
• Copy the generated API Key
• Paste the key inside the mobile app configuration file
• The API Key is used to verify and authenticate mobile API requests
• You can activate, deactivate, edit, or delete API Keys anytime
• Use separate API Keys for different applications if needed

Create API Key

• Name: Enter a label for the API key (e.g., Mobile App, Admin App)
• API Key: Click Generate to auto-create a unique key
• Status: Set Active or Inactive
• Create: Click to save the API key

Existing API Keys

• View all generated API keys in a table
• Check name, key value, and status
• Edit or delete API keys anytime
• Deactivate keys to block access instantly

Usage

• Used for authenticating mobile app API requests
• Ensures only authorized apps can access the system
• Helps manage multiple app integrations

Important Notes

• Keep API keys secure and do not expose publicly
• Regenerate keys if compromised
• Use different keys for different applications
• Always save changes after generating a key

🖼 Configuration Example

🚀 Step 4: Apply Changes

8. Change Support Email

To change the support email, you need to update the supportEmail in the lib/utils/app_constants.dart file.

💻 Flutter Code Configuration

Open the following file:

Update the supportEmail variable:

9. Run This App

Follow the steps below to run the Flutter application in debug mode on Android and iOS devices.

1. Open Android Studio, VS Code, or your preferred terminal.
2. Navigate to the Flutter project directory.
3. Install Flutter dependencies:

flutter pub get

4. For iOS only, navigate to the iOS folder and install CocoaPods dependencies:

cd ios
pod install

5. Start an Android Emulator, iOS Simulator, or connect a physical device.
6. Run the following command:

flutter run

Flutter will automatically detect the connected Android or iOS device and launch the application in debug mode.

Useful Flutter Commands

flutter clean
flutter pub get
flutter devices
flutter doctor

10. App Build & Release

Build Debug APK

Build Release APK

Generate Android Release Build

Open terminal in your Flutter project root directory and execute the following command:

flutter build apk --release

After the build process is completed successfully, the generated release APK file will be available at:

build/app/outputs/flutter-apk/app-release.apk

Generate iOS Release Build

Open terminal in your Flutter project root directory and execute the following command:

flutter build ios --release

After the build process is completed successfully, open the generated Xcode workspace using:

open ios/Runner.xcworkspace

In Xcode:

1. Select Any iOS Device as the build target
2. Go to Product → Archive
3. Wait for the archive process to complete
4. Follow the upload steps to publish on App Store Connect

Troubleshooting

11. App Deployment

This guide provides an overview of deploying your Flutter application to different platforms. For detailed step-by-step instructions, please refer to the comprehensive deployment sections included below.

Google Play Store Deployment

To deploy your application on Google Play Store, complete the following steps:

• Create a Google Play Developer account
• Prepare your application for release
• Create a new application listing
• Upload release APK or App Bundle
• Complete Play Store listing information
• Submit the application for review

App Store Deployment

To deploy your application on Apple App Store, complete the following steps:

• Enroll in Apple Developer Program
• Prepare the application for release
• Create a new app in App Store Connect
• Upload the generated IPA build
• Complete App Store application information
• Submit the application for review

Comprehensive Deployment Guide

For detailed step-by-step deployment instructions, refer to the complete deployment documentation sections for Android and iOS platforms.

Included Deployment Guides:

Google Play Store

Complete guide for generating signed APK/AAB and publishing your Flutter app on Google Play Store.

Apple App Store

Step-by-step iOS deployment guide including signing, archive generation, and App Store publishing.

Important Notes

• Ensure your application meets all platform-specific requirements
• Keep signing keys, certificates, and provisioning profiles secure
• Test release builds thoroughly before submission
• Be prepared for platform review processes, which may take several days
• Prepare all required assets before submission

Common Requirements

Both Google Play Store and Apple App Store require:

• Privacy Policy
• Application Icons in required sizes
• Application Screenshots
• Application Description
• Keywords and Metadata
• Support URL
• Marketing Assets

Troubleshooting

If you encounter issues during deployment:

• Check platform-specific guidelines carefully
• Verify all required assets are provided
• Ensure application meets technical requirements
• Review rejection reasons carefully if rejected