Code Setup
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
Run the following command on the IDE terminal to get all the required packages.
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.
Generate app logo by this link
To change the app logo in your UniBooker Flutter project, follow the steps outlined in this video tutorial. The video 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.
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).
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.
To change the app name in your UniBooker Flutter project, follow the steps demonstrated in this video tutorial. The video 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.
Keep It Short: Aim for a name that is easy to remember and pronounce. Shorter names are often more user-friendly.
Avoid Special Characters: Use letters and numbers; avoid symbols or spaces, as they can cause issues in some platforms.
Check Availability: Ensure the name is not already in use on app stores and social media platforms to avoid confusion.
Branding Consistency: Ensure the name aligns with your brand identity and reflects the app's purpose.
Test with Users: Consider getting feedback on potential names from target users to gauge their response.
Open your UniBooker project in your preferred code editor (e.g., VS Code, Android Studio).
Locate the project directory on your file system.
Navigate to the following file path:
lib/api/config.dart
Open the config.dart
file.
Step 2: Add Your URL to the Base URL Variable
Always include /api/v1/
at the end of your base URL to match the expected API structure.
Double-check the URL to ensure it is correct and accessible.
Video Tutorial
To change the base URL in your UniBooker Flutter project, you can refer to the instructions provided in this video tutorial. The video outlines the steps necessary to update the base URL for both Android and iOS platforms, ensuring your app connects to the correct backend services.
To change the package name in your UniBooker Flutter project, you can follow the detailed steps outlined in this video tutorial. This video will guide you through the necessary modifications for both Android and iOS platforms to ensure your app is correctly identified.
Use Lowercase Letters: Package names should consist only of lowercase letters, numbers, and dots (e.g., com.example.unibooker).
Consistency Across Platforms: Ensure the package name is consistent 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.
To set up OneSignal for push notifications in your UniBooker Flutter project, you can refer to the following video tutorials. They will guide you through the necessary steps for both Android and iOS configurations: OneSignal Setup for Android and iOS: This video provides a comprehensive guide to integrating OneSignal into your app for both platforms. OneSignal SDK Setup for Flutter: This video focuses specifically on the OneSignal SDK setup in Flutter, ensuring you have all the required configurations.
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.
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.
Open the Firebase Console: Navigate to Firebase Console.
Log in: Use your Google account credentials to log in.
Choose Existing Project: Select your existing Firebase project from the dashboard.
Create New Project: If you don’t have a project, click on "Add project" and follow the prompts to create one.
Click on Gear Icon: Located next to Project Overview on the left sidebar.
Select "Project settings": This will take you to your project's settings page.
Select Cloud Messaging: Click on the Cloud Messaging tab.
Locate Server Key and Sender ID: Here, you will find your Server Key and Sender ID.
Copy the Server Key: Click the copy icon next to the Server Key to save it for later use.
Select Your App: Choose your app from the list.
Navigate to Settings > Platforms: Click on Android.
Paste Server Key: Enter the Firebase Server Key you copied earlier in the designated field.
Click Save: Ensure to save your settings.
Select or Create App: Choose your existing app or create a new one as needed.
Open Keychain Access: On your Mac, launch the Keychain Access app.
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.
Go to OneSignal Dashboard: Navigate to your OneSignal app settings.
Select iOS Platform: Under Settings > Platforms, select iOS.
Upload APNs Certificate: Upload the generated APNs certificate you created in the previous step.
Open Your Project in Xcode: Launch Xcode and open your Flutter project.
Navigate to Capabilities: Click on your project target, then go to Capabilities.
Enable Features: Turn on Push Notifications and Background Modes (ensure Background fetch and Remote notifications are checked).
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
Introduction:
we will guide you through the process of setting up Firebase for the Unibooker Vehicle app, covering both Android and iOS platforms. Follow these steps to ensure your Firebase project is correctly integrated and ready for use.
Open the Firebase Console.
Click Add Project to create a new Firebase project.
Follow the prompts to configure the project, give it a suitable name (e.g., "Unibooker Vehicle"), and agree to the terms.
Click Create Project and wait for it to finish setting up.
For Android:
In the Firebase console, click on the Android icon under the "Get started by adding Firebase to your app" section.
Enter your Android package name (e.g., com.unibooker.vehicle).
Click Register App.
Download the google-services.json file that Firebase generates for you.
For iOS:
In the Firebase console, click on the iOS icon.
Enter your iOS bundle ID (e.g., com.unibooker.vehicle).
Download the GoogleService-Info.plist file after registering the app.
For Android:
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:
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.
Open the firebase_options.dart (or equivalent) in your Unibooker codebase.
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.
Once the configuration files and credentials are set up, restart your development environment or build the project again.
Verify that everything is working correctly by running your app. Firebase should now be successfully connected to your Unibooker project.
In this guide, we will walk through the steps to enable Google Login for both Android and iOS in the Unibooker app. Most configurations are complete, but you will need to enable Google Authentication in Firebase and, for iOS, add some additional details like the Reverse Client ID, API Key, and Google App ID to the Info.plist file. Additionally, for Android, you will need to generate the SHA-1 and SHA-256 keys.
Log in to Firebase Console:
Open the Firebase Console in your web browser.
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.
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 everything works correctly.
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.
Open Your Android Project:
Launch Android Studio and open your Android project
Open the Terminal.
Navigate to your Java bin directory (this path may vary based on your JDK installation): cd /usr/bin/
Run the following command to generate the SHA-1 and SHA-256 keys: keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
This command will output the SHA-1 and SHA-256 keys in the terminal.
Open the Command Prompt.
Navigate to your Java bin directory (this path may vary based on your JDK installation): cd "C:\Program Files\Java\jdk<version>\bin"
Run the following command to generate the SHA-1 and SHA-256 keys: keytool -list -v -keystore %USERPROFILE%\.android\debug.keystore -alias androiddebugkey -storepass android -keypass android
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 on 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.
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.
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 project build.
Extract Values from GoogleService-Info.plist:
Open the GoogleService-Info.plist file in a text editor or Xcode.
Locate the following values in the file:
Reverse Client ID ,API Key ,Google App ID
Add to Info.plist:
Open Info.plist in a code editor or Xcode.
Add the following entries: <key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>YOUR_REVERSE_CLIENT_ID</string>
</array>
</dict>
</array>
<key>GADApplicationIdentifier</key>
<string>YOUR_GOOGLE_APP_ID</string>
<key>API_KEY</key>
<string>YOUR_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.
As all configurations for Android are already in place, simply run your app on an Android device or emulator to test Google Login.
After adding the required keys to Info.plist and rebuilding the app, test the Google Login on an iOS device or simulator.
You have successfully set up Google Login for both Android and iOS in the Unibooker app!
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!
This updated document now includes the step to update the google-services.json file after enabling Google Sign-In in Firebase.
Congratulations on completing most of the Firebase setup for UniBooker! You are now ready to enable the Realtime Database and Firebase Storage in your Firebase Console. This process is straightforward and requires no technical knowledge. Just follow the simple steps outlined below to complete your setup.
Open Firebase Console: Open your web browser and go to the Firebase Console.
Log In: Use the Google account associated with your Firebase project to log in.
Select Your Project: Once logged in, you will see a list of your projects. Click on the project named Unibooker to access its settings.
Navigate to Realtime Database: In the left sidebar, look for the Build section. Click on Realtime Database to access the database settings.
Create the Database: You will see a button labeled Create Database. Click on it to initiate the creation of your Realtime Database.
Set Database Location: You will be prompted to choose the database location. Select the region that is closest to your app users to ensure optimal performance. If you’re unsure, you can simply use the recommended option.
Choose Security Mode: You will have two options for security settings:
Start in locked mode (recommended for enhanced security)
Start in test mode (less secure, intended for testing purposes) For better security, select Start in locked mode. Note that you can modify these settings later if needed.
Enable the Database: After configuring the options, click the Enable button. Firebase will then set up your Realtime Database, and you will receive a confirmation once the process is complete.
Add Security Rules
9 Publish the Rules:
After entering the rules, click the "Publish" button at the top right corner of the screen. This will apply the new rules to your real Time database.
Navigate to Firebase Storage: Again, in the left sidebar under the Build section, click on Storage to access the storage settings.
Set Up Storage: Click on the Get Started button to begin the setup process for Firebase Storage.
Choose a Storage Location: Similar to the Realtime Database, you will be prompted to select a storage location. Choose the same region as your database (or use the recommended option) to ensure that your data remains cohesive.
Add Security Rules
After entering the rules, click the "Publish" button at the top right corner of the screen. This will apply the new rules to your database.
5 Publish the Rules
After entering the rules, click the "Publish" button at the top right corner of the screen. This will apply the new rules to your database.
You have now successfully enabled Firebase Realtime Database and Firebase Storage for your Unibooker app! With these features set up, you are ready to utilize them for various functionalities, such as real-time data synchronization and file storage. Your Firebase environment is now equipped to support enhanced communication and data management within your application.
To enable Apple Login for Unibooker, you need to generate a certificate and set up your project. Follow these steps to ensure your application is ready for Apple Sign-In.
Open Keychain Access on your Mac.
Navigate to Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority.
Enter your Apple ID email and a common name (your name or app name). Leave the CA email blank and select Saved to disk.
Click Continue and save the CSR file.
In the Apple Developer portal, go to Certificates, IDs & Profiles.
Under Certificates, click the + icon.
Choose Apple ID Authentication and ensure to enable Sign In with Apple during this process.
Upload the CSR file and download the generated certificate.
Double-click the downloaded certificate file to install it in Keychain Access.
Open the ios folder of your Flutter project using Xcode (.xcworkspace file).
Select your project in the left sidebar.
Go to the Signing & Capabilities tab.
Click + Capability and add Sign In with Apple.
Ensure your app's bundle identifier matches the one registered in the Apple Developer portal.
For iOS video referral
Open Google Cloud Console:
Visit Google Cloud Console.
Sign in with your Google account.
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.
Select the Project:
After the project is created, select it from the project dropdown menu.
Go to the API Library:
Navigate to APIs & Services > Library from the left menu.
Search and Enable the APIs: Enable the following APIs one by one:
Geocoding API: Converts addresses into geographic coordinates and vice versa.
Places API: Retrieves information about places using query strings or geographic coordinates.
Directions API: Provides routes and directions between locations.
Place Details (New): Fetches detailed information about a specific place.
Google Places API: Supports querying and retrieving places data.
Maps SDK for Android: Provides mapping functionality for Android.
Maps SDK for iOS: Provides mapping functionality for iOS.
Maps JavaScript API: Provides interactive maps for the web platform, allowing users to view locations and routes directly in their browser..
Enable Each API:
Search for each API in the library.
Click the Enable button on the API overview page.
Navigate to Credentials:
Go to APIs & Services > Credentials.
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
For Flutter (UniBooker):
Android Integration
Open the AndroidManifest.xml
file in your Flutter project:
Path: android/app/src/main/AndroidManifest.xml
.
Replace YOUR_API_KEY
with the key you generate
iOS Integration
Open the AppDelegate.swift
(or AppDelegate.m
) file:
Path: ios/Runner/AppDelegate.swift
.
Add the following code to provide the API key:
Path: ios/Runner/AppDelegate.swift
.
Replace YOUR_API_KEY
with the key you generated.
To set up the Google Maps API Key in your UniBooker Flutter app, you can follow the tutorial provided in the video below. This video will guide you through the process of generating and integrating your Google Maps API key into your application.
To set up multi-language support in your UniBooker 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.
Before running the app, clean the project & get the packages by running the following commands one after one:
And finally, run the following command to run the app:
Go to OneSignal Dashboard: Visit the.
Log in: Go to and log in.
iOS Video Reference:
Android Video Reference:
Visit the and log in with your Apple ID.