Code Setup

This Guide will work with both Driver and Rider app

Run an existing flutter project on IDE

Launch your preferred IDE (either VSCode or Android Studio) and navigate to the 'Project' folder. Allow some time for the project to load.

Run the following command on the IDE terminal to clean the whole project first.

flutter clean

Run the following command on the IDE terminal to get all the required packages.

flutter pub get

Make sure these commands should be run from the root directory of the code.

These commands will clean the project and get the required packages. Wait some time to get all the packages.

App Logo

Generate app logo by this link https://www.appicon.co/

To change the app logo in your RideOn Flutter project, follow the steps outlined in this guide using the provided screenshot. The screenshot walks you through generating and replacing the app icons for both Android and iOS platforms, ensuring your app displays the correct branding across all devices. Make sure to update the pubspec.yaml file and run the necessary Flutter commands to integrate your new logo successfully.

Additional Tips for Changing the App Icon

• Recommended Sizes:

  • iOS: App Store (1024x1024 px), Home Screen (180x180 px, 120x120 px, 76x76 px, 167x167 px).

  • Android: Launcher (48x48 dp, 192x192 px for xxhdpi), App Icon (512x512 px).

• Basic Info: The icon should be 150x150 px as a starting point for clarity and scalability.

• Simplicity: Use simple, recognizable designs.

• Visibility: Test the icon against different backgrounds.

• Branding: Reflect your app's purpose and maintain consistency.

• File Format: Use PNG for quality.

• Update: Ensure all instances are updated across platforms.

We have added a screenshot to assist you with the process.

• To change the app icon, start by adding the image to the project in the assets/images/example.png directory.

• Then, open the pubspec.yaml file and, based on the screenshot highlight, add the image path.

• also modify the codebase in lib/core/utils/common_widget.dart to reflect the changes.

Widget commonlyUserLogo() {
  return Image.asset(
    'assets/images/appIcon.png',height: 100,
  );
}
//here change the same image on this path line no 28

• Run the necessary commands to update the app icon

First, run the command: 
flutter pub get.
Then, to change the app icon, execute: 
flutter pub run flutter_launcher_icons:main

Note: After running this command, close the project, clean it, uninstall the build or APK, and then reinstall it after Flutter can process the changes. The app icon will be updated accordingly.

How to Change the Application Launcher Icon in Flutter.Medium

App Name

To change the app name in your RideOn Flutter project, follow the steps demonstrated in the provided screenshot. The screenshot explains how to modify the app name for both Android and iOS platforms. Ensure you update the necessary configuration files and run the required Flutter commands to reflect the name change across your app. Additionally, to change the app name, you need to update the file path line 58.

On Code

/lib/presentation/screens/Splash/splash_screen.dart

For Android

Path:

• Main AndroidManifest.xml: android/app/src/main/AndroidManifest.xml

 android:label="Add_app_name"

For IOS

Path:

• Info.plist: ios/Runner/Info.plist

<key>CFBundleName</key>
<string>Add_app_name</string>

<key>CFBundleDisplayName</key>
<string>Add_app_name</string>

We have added a screenshot to assist you with the process.

Change Application Name and Icon in FlutterMedium

Base URL

Step 1: Open the Project

1. Open your project in your preferred code editor (e.g., VS Code, Android Studio).

2. Locate the project directory on your file system.

3. Navigate to the following file path:

   lib/core/services/config.dart

4. Open the config.dart file.

Step 2: Add Your URL to the Base URL Variable

static const String baseDomain = 'https://yourdomain.com/';

Important Notes.

• Double-check the URL to ensure it is correct and accessible.

Change Package Name for RideOn Flutter Project

To change the package name in your RideOn Flutter project for both Android and iOS platforms, follow the detailed steps outlined below using the provided screenshots. These steps ensure your app is correctly identified across both platforms.

Steps to Change the Package Name

For Android:

1. Locate the Android Configuration File:

   • Navigate to the /android/app/src/main directory in your project.

   • Open the kotlin/com/user/amar/MainActivity.kt file (as shown in the screenshot).

2. Update the Package Name:

   • At the top of the MainActivity.kt file, modify the package declaration.

   • Replace the existing package Add_package_name_here with your desired package name (e.g., com.rideon.rider).

   • Example: Change package Add_package_name_here to package com.rideon.rider.

1. Update the build.gradle File:

   • Open the /android/app/build.gradle file (as shown in the screenshot).

   • Locate the defaultConfig section and update the applicationId field.

   • Replace applicationId "Add_package_name_here" with your desired package name (e.g., applicationId "com.rideon.rider").

2. Sync and Build:

   • Run the command flutter clean in your terminal.

   • Then run flutter pub get to update dependencies.

   • Build the app with flutter run to ensure the changes are applied.

For iOS:

1. Open the iOS Project in Xcode:

   • Navigate to the /ios folder in your project.

   • Right-click on the Runner project and select "Open in Xcode" (as shown in the screenshot).

2. Update the Package Name:

   • In Xcode, select the Runner project from the left sidebar.

   • Go to the "Signing & Capabilities" tab.

   • Under the "Team" dropdown, ensure you have a development team selected.

   • In the "Bundle Identifier" field, replace add-package-here with your desired package name (e.g., com.rideon.rider).

3. Sync and Build:

   • Save the changes in Xcode.

   • Run flutter clean in your terminal.

   • Then run flutter pub get to update dependencies.

   • Build the app with flutter run to verify the changes.

Additional Tips for Changing Package Name:

• Use Lowercase Letters: Package names should consist only of lowercase letters, numbers, and dots (e.g., com.rideon.rider).

• Consistency Across Platforms: Ensure the package name is identical for both Android and iOS to avoid conflicts.

• Update Dependencies: After changing the package name, update any dependencies that reference it.

• Test Thoroughly: Run your app on both platforms to ensure the package name change hasn’t affected functionality.

• Backup Your Project: Before making changes, always create a backup to prevent any data loss.

OneSignal Setup for Flutter Notifications

Integrating OneSignal into a Flutter project for both iOS and Android involves setting up the OneSignal SDK and configuring your project to handle notifications. Here’s a detailed step-by-step guide to help you get started.

Prerequisites

• A Flutter project set up and ready.

• Access to an Apple Developer account for iOS configuration.

• An Android project in your Flutter environment with access to your google-services.json.

For Android

Step 1: Access Firebase Console

1. Open the Firebase Console: Navigate to Firebase Console.

2. Log in: Use your Google account credentials to log in.

Step 2: Select or Create a Project

1. Choose Existing Project: Select your existing Firebase project from the dashboard.

2. Create New Project: If you don’t have a project, click on "Add project" and follow the prompts to create one.

Step 3: Navigate to Project Settings

1. Click on Gear Icon: Located next to Project Overview on the left sidebar.

2. Select "Project settings": This will take you to your project's settings page.

Step 4: Go to Cloud Messaging Tab

1. Select Cloud Messaging: Click on the Cloud Messaging tab.

2. Locate Server Key and Sender ID: Here, you will find your Server Key and Sender ID.

Step 5: Copy the Server Key

1. Copy the Server Key: Click the copy icon next to the Server Key to save it for later use.

Step 6: Integrate Server Key into OneSignal

1. Go to OneSignal Dashboard: Visit the OneSignal Dashboard.

2. Select Your App: Choose your app from the list.

3. Navigate to Settings > Platforms: Click on Android.

4. Paste Server Key: Enter the Firebase Server Key you copied earlier in the designated field.

5. Click Save: Ensure to save your settings.

For iOS

Step 1: Access Apple Developer Account

1. Log in: Go to Apple Developer Account and log in.

2. Select or Create App: Choose your existing app or create a new one as needed.

Step 2: Generate APNs Certificate

1. Open Keychain Access: On your Mac, launch the Keychain Access app.

2. Request Certificate: Go to Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority.

• Fill in the required information, including your app's bundle identifier.

• Save the certificate request to your disk.

Step 3: Upload APNs Certificate to OneSignal

1. Go to OneSignal Dashboard: Navigate to your OneSignal app settings.

2. Select iOS Platform: Under Settings > Platforms, select iOS.

3. Upload APNs Certificate: Upload the generated APNs certificate you created in the previous step.

Step 4: Enable Push Notifications in Xcode

1. Open Your Project in Xcode: Launch Xcode and open your Flutter project.

2. Navigate to Capabilities: Click on your project target, then go to Capabilities.

3. Enable Features: Turn on Push Notifications and Background Modes (ensure Background fetch and Remote notifications are checked).

After completing all the setup steps, navigate to the project path /lib/core/services/config.dart and add the API key and OneSignal App ID. We will also provide a screenshot to assist you.

---

Final Notes

• Security: Keep your Firebase Server Key secure, as it is essential for sending messages to your app.

• Testing: Always test your push notifications on actual devices for both Android and iOS.

• Documentation: Regularly check OneSignal’s and Firebase’s official documentation for any updates or changes.

This detailed guide will help you set up OneSignal in your Flutter project for both Android and iOS platforms. If you have any further questions or need assistance, feel free to ask!

Please follow this link to setup all necessary details for iOS and Android setup

Flutter SDK setup - OneSignalOneSignal

How to Set Up Firebase

Introduction:

we will guide you through the process of setting up Firebase for the RIdeOn app, covering both Android and iOS platforms. Follow these steps to ensure your Firebase project is correctly integrated and ready for use.

Step 1: Create a Firebase Project

1. Open the Firebase Console.

2. Click Add Project to create a new Firebase project.

3. Follow the prompts to configure the project, give it a suitable name (e.g., "rideon"), and agree to the terms.

4. Click Create Project and wait for it to finish setting up.

Step 2: Register Your App (Android & iOS)

For Android:

1. In the Firebase console, click on the Android icon under the "Get started by adding Firebase to your app" section.

2. Enter your Android package name (e.g., com.rideon.vehicle).

3. Click Register App.

4. Download the google-services.json file that Firebase generates for you.

For iOS:

1. In the Firebase console, click on the iOS icon.

2. Enter your iOS bundle ID (e.g., com.rideon.vehicle).

3. Download the GoogleService-Info.plist file after registering the app.

Step 3: Add Firebase Configuration Files to Your Project

For Android:

1. Copy the google-services.json file you downloaded earlier.

Navigate to your project directory, and place the file in the following location: /android/app/google-services.json

For iOS:

1. Copy the GoogleService-Info.plist file you downloaded.

Place it inside your iOS project at: /ios/Runner/GoogleService-Info.plist

Please note that the file you download must replace the existing file in the codebase for both Android and iOS.

Step 4: Add Firebase Credentials to the Project

1. Open the firebase_options.dart (or equivalent) in your RideOn codebase.

2. Enter your Firebase credentials, including the API keys, project ID, and other required fields. You can find these details in your Firebase console under Project Settings.

Step 5: Finalize Setup & Restart

1. Once the configuration files and credentials are set up, restart your development environment or build the project again.

2. Verify that everything is working correctly by running your app. Firebase should now be successfully connected to your Unibooker project.

---

For more details follow this video to setup firebase

Google Login for Android & iOS

Introduction

This guide walks you through the steps to enable Google Login for both Android and iOS in the RideOn app. Most configurations are already complete, but you will need to enable Google Authentication in Firebase. For iOS, additional details such as the Reverse Client ID, API Key, and Google App ID must be added to the Info.plist file. For Android, you will need to generate the SHA-1 and SHA-256 keys.

---

Step 1: Enable Google Authentication in Firebase

• Log in to Firebase Console:

  • Open the Firebase Console in your web browser at Firebase Console.

  • Log in with the Google account associated with your Firebase project.

• Navigate to Authentication:

  • In the left-hand sidebar, under the "Build" section, click on "Authentication."

• Enable Google Sign-In:

  • In the "Sign-in Method" tab, find "Google" and click on it.

  • Toggle the "Enable" button to "On."

  • Optionally, enter your support email.

  • Click "Save."

• Important Step: Update Google Services JSON:

  • After enabling Google Sign-In, download the updated google-services.json file from Firebase.

  • Replace the old /android/app/google-services.json file in your Android project with the updated one to ensure proper functionality.

---

Step 2: Android Setup

To set up Google Login on Android, you need to generate the SHA-1 and SHA-256 keys and add them to your Firebase project settings.

Step-by-Step Instructions for Android Setup:

• Open Your Android Project:

  • Launch Android Studio and open your Android project.

• Generate SHA-1 and SHA-256 Keys:

For Mac:

SHA1 key for Mac and Android in flutter for Google singinMedium

For Windows:

SHA 1 & SHA 256 — Why? How to generate?Medium

• Copy the SHA-1 and SHA-256 Keys:

  • Locate the SHA-1 and SHA-256 values in the output and copy them for the next step.

• Add SHA-1 and SHA-256 Keys to Firebase:

  • Return to the Firebase Console.

  • Navigate to "Project Settings" by clicking the gear icon next to your project name.

  • Under "Your apps," find your Android app and click on it.

  • Scroll down to the "SHA certificate fingerprints" section.

  • Click "Add Fingerprint."

  • Paste the SHA-1 key and click "Save." Repeat the process for the SHA-256 key.

---

Step 3: iOS Setup

For iOS, additional configurations are required. You need to extract information from the GoogleService-Info.plist file and add it to your project’s Info.plist file.

Step-by-Step Instructions for iOS Setup:

• Find and Download GoogleService-Info.plist:

  • In the Firebase Console, go to "Project Settings."

  • Under "Your apps," select your iOS app.

  • If you haven’t already, download the GoogleService-Info.plist file for your iOS app.

• Add GoogleService-Info.plist to Xcode:

  • Open your iOS project in Xcode.

  • Ensure the GoogleService-Info.plist file is added to your project:

    • Go to the /ios/Runner/ folder and place the file there.

    • Drag it into Xcode under the "Runner" project to include it in the build.

• Extract Values from GoogleService-Info.plist:

  • Open the GoogleService-Info.plist file in a text editor or Xcode.

  • Locate the following values:

    • REVERSED_CLIENT_ID (Reverse Client ID)

    • API_KEY (API Key)

    • GOOGLE_APP_ID (Google App ID)

Add Reverse id for for google login

	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>add_cliend_revirce_id</string>
			</array>
		</dict>
	</array>

Add Google App id

<key>GOOGLE_APP_ID</key>
	<string>Add_GOOGLE_APP_ID</string>

Add Api key

	<key>API_KEY</key>
	<string>Add_api_key</string>

Replace the placeholders with the actual values from the GoogleService-Info.plist file.

Save and Rebuild:

• After updating the Info.plist, save the changes.

• Rebuild your iOS app in Xcode and run it to test the Google Login functionality.

---

Step 4: Testing Google Login

Android Testing:

• As all configurations for Android are already in place, simply run your app on an Android device or emulator to test Google Login.

iOS Testing:

• After adding the required keys to Info.plist and rebuilding the app, test the Google Login on an iOS device or simulator.

---

Conclusion

You have successfully set up Google Login for both Android and iOS in the RideOm app!

Summary:

• For Android: Generated SHA-1 and SHA-256 keys, added them to Firebase, and updated the google-services.json file.

• For iOS: Added the Reverse Client ID, API Key, and Google App ID to the Info.plist file.

After following these steps, users should be able to sign in with their Google accounts on both platforms!

For more details:

• iOS Video Reference

• Android Video Reference:

This updated document now includes the step to update the google-services.json file after enabling Google Sign-In in Firebase.

Enabling Firebase Services for RideOn App

This guide outlines the steps to enable Firebase Realtime Database, Firebase Storage, and Firebase Firestore for the RideOn app, including ride acceptance and related functionalities. The provided screenshot shows an existing index for the drivers collection, which will be utilized and expanded.

---

Step 1: Enable Firebase Realtime Database

• Navigate to Realtime Database:

  • In the Firebase Console left sidebar, under the "Build" section, click "Realtime Database."

• Create the Database:

  • Click the "Create Database" button to start the setup.

• Set Database Location:

  • Choose a region closest to your app users (e.g., recommended option if unsure).

• Choose Security Mode:

  • Select "Start in locked mode" for enhanced security (can be adjusted later).

  • Click "Enable" to complete the setup.

• Add Security Rules:

{
  "rules": {
    "drivers": {
      ".read": true,
      ".write": true
    },
    "ride_requests": {
      ".read": true,
      ".write": true,
         ".indexOn": ["userId","driverId"]
    }
  }
}

• Publish the Rules:

  • Click the "Publish" button at the top right to apply the rules.

---

Step 2: Enable Firebase Firestore for Ride Acceptance

• Navigate to Firestore:

  • In the Firebase Console left sidebar, under "Build," click "Firestore Database."

• Create the Database:

  • Click "Create Database," choose "Start in locked mode" for security, and select a location.

Update Indexes for Compatibility

Based on the screenshot, the existing index for the drivers collection is:

• Collection ID: drivers

• Fields Indexed: docApprovedStatus, driverStatus, itemTypeId, rideStatus, geo.geohash, name

• Query Scope: Collection

• Status: Enabled

It should be look like this

Add Security Rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /drivers/{driverId} {
      allow read: if true;
      allow write: if true;
    }
  }
}

Publish the Rules:

• Click the "Publish" button at the top right to apply the rules.

This ensures compatibility with code handling ride requests, acceptances, and status updates.

---

Final Notes

• Test the database and storage setups with real data.

• Adjust security rules as needed based on your app's requirements.

• Refer to Firebase Documentation for further assistance

A Complete Guide to Setting Up Firebase in FlutterMedium

Setup of a Cloud Firestore Database tutorial (step by step)Medium

Setup of a Firebase Realtime Database tutorial (step by step)Medium

Apple Login Setup for RideOn

To enable Apple Login for RideOn, you need to generate a certificate and set up your project. Follow these steps to ensure your application is ready for Apple Sign-In.

Step 1: Generate an Apple Developer Certificate

1.1. Sign in to Apple Developer Account

• Visit the Apple Developer Account and log in with your Apple ID.

1.2. Create a Certificate Signing Request (CSR)

1. Open Keychain Access on your Mac.

2. Navigate to Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority.

3. Enter your Apple ID email and a common name (your name or app name). Leave the CA email blank and select Saved to disk.

4. Click Continue and save the CSR file.

1.3. Create and Download the Certificate

1. In the Apple Developer portal, go to Certificates, IDs & Profiles.

2. Under Certificates, click the + icon.

3. Choose Apple ID Authentication and ensure to enable Sign In with Apple during this process.

4. Upload the CSR file and download the generated certificate.

1.4. Install the Certificate

• Double-click the downloaded certificate file to install it in Keychain Access.

Step 2: Set Up Your Project in Xcode

2.1. Open Your Project

• Open the ios folder of your Flutter project using Xcode (.xcworkspace file).

2.2. Enable Sign In with Apple

1. Select your project in the left sidebar.

2. Go to the Signing & Capabilities tab.

3. Click + Capability and add Sign In with Apple.

2.3. Check Bundle Identifier

• Ensure your app's bundle identifier matches the one registered in the Apple Developer portal.

For iOS video referral

Apple Login | FlutterFlow Documentationdocs.flutterflow.io

How to Generate and Configure a Google API Key for RideOn

---

Step 1: Create a Google Cloud Project

1. Open Google Cloud Console:

   • Visit Google Cloud Console.

   • Sign in with your Google account.

2. Create a New Project:

   • In the top navigation bar, click Select a Project and then New Project.

   • Enter the Project Name as (Your Project Name)

   • Click Create.

3. Select the Project:

   • After the project is created, select it from the project dropdown menu.

---

Step 2: Enable Required APIs

1. Go to the API Library:

   • Navigate to APIs & Services > Library from the left menu.

2. Search and Enable the APIs: Enable the following APIs one by one:

   • Geocoding API: Converts addresses into geographic coordinates (latitude and longitude) and vice versa, enabling precise location-based services.

   • Places API: Retrieves detailed information about places using query strings or geographic coordinates, helping users find relevant locations.

   • Directions API: Provides routes and directions between specified locations, assisting with navigation and trip planning.

   • Place Details (New): Fetches comprehensive information about a specific place, including reviews, photos, and operational hours.

   • Google Places API: Supports querying and retrieving data about places, offering a robust solution for location-based applications.

   • Maps SDK for Android: Offers mapping functionality tailored for Android devices, enabling the integration of interactive maps.

   • Maps SDK for iOS: Provides mapping capabilities optimized for iOS devices, enhancing location features in mobile apps.

   • Maps JavaScript API: Delivers interactive maps for web platforms, allowing users to view locations and routes directly in their browsers.

   • Directions API: (Repeated) Provides routes and directions between specified locations, assisting with navigation and trip planning.

   • Distance Matrix API: Calculates travel distances and times between multiple origins and destinations, useful for route optimization.

   • Routes API: Offers advanced routing options, including traffic-aware directions and alternative routes, to improve navigation efficiency.

3. Enable Each API:

   • Search for each API in the library.

   • Click the Enable button on the API overview page.

Step 3: Generate an API Key

1. Navigate to Credentials:

   • Go to APIs & Services > Credentials.

2. Create an API Key:

   • Click Create Credentials and select API Key.

   • A new API key will be generated. Copy the key and save it securely.

Video Tutorials

---

Step 5: Integrate the API Key into RideOn

For Flutter (RideOn):

Android Integration

1. Open the AndroidManifest.xml file in your Flutter project:

2. Path: android/app/src/main/AndroidManifest.xml.

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY" />

Replace YOUR_API_KEY with the key you generate

iOS Integration

1. Open the AppDelegate.swift (or AppDelegate.m) file:

   • Path: ios/Runner/AppDelegate.swift.

2. Add the following code to provide the API key:

3. Path: ios/Runner/AppDelegate.swift.

     GMSServices.provideAPIKey("YOUR_API_KEY")

Replace YOUR_API_KEY with the key you generated.

<key>GMSApiKey</key>
<string>Add_google_api_key_here</string>
// navigate to the following path /ios/Runner/Info.plist

After generating the API key, navigate to the following path: lib/core/services/config.dart.

Multi-Language Setup

o set up multi-language support in your RideOn app, you can follow the tutorial provided in the video below. This video will guide you through the steps necessary to implement multi-language functionality, allowing your application to cater to a diverse user base.

To set up multiple languages, follow these steps:

1. Navigate to the Project:

   • Go to the /assets/language directory in your project. Some language files are already present here.

2. Copy and Convert a Language File:

   • Copy one of the existing language files (e.g., en.json).

   • Use an AI model like ChatGPT or Grok (based on your preference), paste the entire JSON content, and request a conversion to another language (e.g., French or Spanish). The AI will provide a new JSON file.

   • Save the converted JSON file (e.g., fr.json or es.json) in the /assets/language directory.

3. Update the Locale List:

   • Navigate to /lib/core/extensions/workspace.dart.

final List locale = [
  {'name': 'Russia', 'locale': 'ru'},
  {'name': 'English', 'locale': "en"},
  {'name': 'French', 'locale': 'fr'},
  {'name': 'Arabic', 'locale': 'ar'}
];

Successful Addition:

• Once the new language is added to the list, the language support is successfully implemented.

This is the best content for setting up multi-language support in your RideOn app.

Run The App

Before doing this, connect An Android Emulator from Android Studio or A Real Android device or An iOS Simulator from Xcode, or An real iOS device.

Before running the app, clean the project & get the packages by running the following commands one after one:

flutter clean

flutter pub get

And finally, run the following command to run the app:

flutter run