Introduction

Thank you for purchasing code. It really means a lot and It's our pleasure to serve top-notch service to you. Thank you so much for choosing WRTeam . If you have trouble with the code and documentation please contact to our Support Team Here

eBroker is a app to sell rent your properties it basically connects users.

To run the application you need to setup Flutter first.

Here you can see its steps to setup > Flutter Setup.

Firebase

Overview

In order to run your app and enable authentication features, you need to set up a Firebase project. Follow the steps below to create a Firebase project.

Visit Firebase Console.

Open your web browser and go to the Firebase Console.

Sign in with your Google account or create a new one. Click on "Get Started" to set up your first project. Create a New Project:

Click on the "Add project" button. Enter a project name and choose a suitable project ID. Select your country/region and click "Create Project."

Tap on the flutter icon

Open any IDE (Vs Code, android studio, etc) and paste this commands in there terminal

Copy and paste both command one by one like this

Note:[Make sure to change package name first] Click here

Select Android, IOS, and Web

Type yes if its asking this type of question and press enter

Enable Phone Auth

Overview

You will need to enable firebase auth to work login with OTP if you skip this step you will not able to login into the app.

In the fiebase console go to the Authentication section and turn on tap on the phone login as shown in this image below

Tap on swith button to enable the firebase phone auth

Note:Please add firebase testing number for the testing purpose or firebase will temporary block you if you login multiple time with same number or same device.

Now you have successfully done the step which i mentioned. But when you add firebase testing number it will login without any problem but when you will try to add your real number it will show missing-client-identifier

So how will you solve it?

Please follow the steps which are mentioned below to resolve issue

Open the external terminal or IDE terminal(Vs code, andorid studio,etc)

Note: open terminal in project location and write the command written below

cd android

./gradlew signinReport

The result of this will look something like this Copy this SHA1 and SHA256 and add it into Firebase project settings like shown below

Add like this into the firebase project settings

Get server key from your firebase project and set in panel.

Go to Project Settings -> Cloud Messaging -> Manage API on Google cloud Console.

Copy this key

Set here into the Notification FCM key field

For IOS

For ios your need to perform below given step

In Xcode, open the project.

In the Project Navigator (the left-hand menu), select the project icon that represents your app.

In the top-left corner of the right-hand pane in Xcode, select your app's target.

Navigate to the Capabilities tab.

Enable Push Notifications.

Check Remote Notifications and Background Fetch from Enabling Background Modes.

APNs (Apple's Push Notification service) currently supports two types of connections: token-based (.p8) and certificate-based (.p12).you can follow either one of them

For Token-based (.p8).

Navigate to Certificates, IDs & Profiles > Identifiers > App IDs and click the App ID associated with your app.

On the screen for your App ID, check Capabilities > Push Notifications.

Select App ID in next page & click continue.

And then create Development SSL Certificate & Production SSL Certificate by adding CSR certificate. follow Apple's Create a certificate signing request instructions.

Navigate to Certificates, IDs & Profiles > Keys Section and add a Universal key for Notifications,which you can use for more than one apps as well.

Just save and Download & keep it safe, as it will be downloaded only once.

Then go to Firebase and add this .p8 file along with Your Key ID and Team ID.

General app settings

Change app name

Go to lib>settings.dart

There will be variable named applicationName="Your app name"; set the value into the " quotes.

This will only change display name of minimised app. You have to run following command to change its actual name.

flutter pub global activate rename

after this run the next command

rename setAppName --targets ios,android --value "YourAppName"

Change package name

Go to lib>settings.dart

There will be variable named androidPackageName="Your package name"; set the value into the " quotes.

You have to run this command into the terminal to change package name successfully

rename setBundleId --targets android --value "com.example.bundleId"

App Icon change

App icon is main element for display so you will need to change it to your branding.

Add icon into this folder and rename it with 'icon.png' [Note: make sure icon name is icon.png]

After that please run this command in terminal [Note: make sure you run 'flutter pub get' before]

flutter pub run flutter_launcher_icons

You have successfully changed icon. If you find any issue in icon change please feel free to contact us on Skype

Change App version

First you need to go to pubspec.yaml

Then you will have to change version according to the version which is show in image below.

First have a look at how version works.

Here you can see 1.0.8+23 . Here 1.0.8 is the version name which you can see. and the +23 is the version code. You will have to increment the number after + everytime when you need to upload on store

Please make sure to run 'flutter pub get' after version change

Change theme color

For the new version(1.1.0) and newer: GO to the admin panel Settings>App Settings there you will see theme color change section from there you just have to change color and save and restart the app.

As you can see here you will have to pick color from here.

Tap on any of the Color and you will see popup something like this below.

But the question is how will you set your colors? The answer is there is written R G B just tap on it.

Now you can write your color code here and save it.

If the application is restarted, you'll observe updated colors. However, in certain situations, if these colors fail to load then you will have to set for backup plan. What will it be?

You can set fallback colors into the theme.dart so when there is something error then it will load local colors so your app will not stuck.

Lets see how you can set

set the theme colors as shown above

Add language

Language is main factor of any app. If your users are not able to understand the language of the app so it will be not usefull. So today we will check how to add new language in the app.

Go to assets/languages/

You can use any translation service. We have used IBM Language Translator. Translate Web,App and Admin panel file. You will find web and admin file from the Admin panel languages tab.

You have to add name of language in the fields and the language code.

You can enable disable RTL(Right to left language) mode.

Save and restart the app you will see new language in the app. You can also update language from edit button.

Map API Key

You will have to follow this steps to run google map in the app

First you have to open cloud console

Select the project

You have to enable Geocoding API,Places API, Geolocation APIs, Map Sdk for Android, Map Sdk for IOS, Maps JavaScript API from 'Enable API and Services'.

After that you have to go to credentials section from there you can copy android and ios keys and for the android you can add the map key as shown below.

For the android you have to navigate to android > app > src >main > AndroidManifest.xml file.

For the IOS you will have to navigate to ios/Runner/AppDelegate.swift

Paste Ios key which you have copied from cloud console

Now what about Place api?

You will need to enable billing account in your project first so you can use this feature.

You can check on google or youtube about enabling billing account.

In the begining you have enabled Places API key so you will have add any key from cloud console in the admin panel, you can use android, ios , or you can create new one as well.

Copy that key and open your admin panel. Go to the System setting section

Here you can see place API field just paste and save

Note: Please ensure you have enabled billing account otherwise location search will not work in the app and panel and web.

You have done this step successfully!!!!!

How to setup deep link?

First of all download this google files from the link : Server Side Deeplink Files
Open both files in the any text editor and follow below steps
After above changes save both files (Note- Keep name proper same of both files)
Open server > Go to admin panel root folder
You will get .well-known folder on root directory
If you dont get that folder from setting enable setting visible hidden files then check
After the change setting still you don't find the files, Create new directory named .well-known (Makesure name starts with dot[.])
Add both above saved files inside the .well-known folder.
In server > admin panel root folder you will get .htaccess file, Open it and do changes as per below image.
For further steps open customer app code in android studio and follow below steps.

Setup admob

To begin, create an AdMob account and set up three Ad Units:

Banner Ad
Interstitial Ad
Rewarded Ad

Find your app ID here: https://support.google.com/admob/answer/7356431?hl=en For Android, go to android/app/src/main/AndroidManifest.xml and enter android App Id as shown in below image.

For IOS, go to ios/Runner/Info.plist and enter IOS App Id as shown in below image. You can see here GADApplicationIdentifier.

Paste your id of IOS in it.

Now you will have to copy your Banner and Interstitial Ad ids and paste into admin panel. First open admin panel and navigate to Settings> App Settings.

Paste keys and save it. You can also disable ads in the app you can see there is enable/disable button.

Other icons

There is other main icons as well which you will have to change according to your need.

So you can see below icons and their names.

You can change Splash, HomeLogo , Placeholder from the admin panel.

Splash logo + Company logo

Home Logo

Placeholder

Open admin panel and go to the Settings > App Settings there you will see something like this

Upload SVG pictures [Note: Only .svg formate will work with this]

Save and restart, You will see new ions. but what about this also? what if it faild to load

You will have to set fallback icons for this also

Just navigate to assets/svg/ folder there is Fallback folder you will have to replace your main svg picture there so it will show when its not available or unable to load

Above you can see there is Fallback,Logo, and multi color svg folder.

You will have to set icons with same name in the fallback folder but set the name which is currently set.

If you wanna set your company logo you will have to replace logo with the logo which is located in Logo folder

You can also replace multi color svg

Note: Multicolor svgs will not change according to theme color. you will have to set the svg that can match your preffered colors. Automatic color adoption is not available for multi color

Connect Admin Panel

Note you will have to setup admin panel first otherwise app will not run. It will be stucked on splash screen.

You can follow admin panel doc to learn how to setup Click here

Go to settings.dart

here you can see how to connect admin panel with app in below image.

Above you can see host URL which simply means your admin panel URL. You will have to copy admin panel URL and paste into that host url field.

API data load limit is the indicator that 20 data will load in one request. You can increase or decrese from settings.dart

And the other one Max category load is the indicator that 5 categories will show in homescreen but other will show in show more button

Now you done with admin panel connect!!!

Generating the App(Android)

Follow these step-by-step instructions to generate the app:

Generate Keystore:

Create a keystore to securely sign your Android application.

Open the terminal or command prompt.
Navigate to the 'android/app' directory in your project.
Create a new keystore by running the following command:
For Mac/Linux:
keytool -genkey -v -keystore upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload
For Windows:
keytool -genkey -v -keystore upload-keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias upload
Follow the prompts to enter the required information, such as the keystore password, distinguished name fields, and alias password.
Upon completion, the keystore file (e.g., 'your_keystore_name.keystore') will be saved in the 'android/app' directory.

Configure key.properties:

Update the 'key.properties' file in the 'android' directory to store keystore-related information.

Open the 'key.properties' file in the 'android' directory.
Add the following lines to the file:
storePassword=your_keystore_password keyPassword=your_alias_password keyAlias=your_alias_name storeFile=your_keystore_name.keystore
Save the 'key.properties' file.

Split APK:

Generate split APKs to optimize the distribution of your application.

Open the terminal or command prompt.
Navigate to your project directory.
Run the following command to build the split APKs:
flutter build apk --split-per-abi --no-tree-shake-icons

Release APK:

Create a final version of the APK suitable for distribution to end-users.

Open the terminal or command prompt.
Navigate to your project directory.
Run the following command to build the release APK:
flutter build apk --release

App Bundle:

Note:

Before generating the App Bundle, ensure you have completed the 'Update key.properties' step to configure your keystore information. Refer to step 1 and 2 for details.

Package the app as an Android App Bundle for efficient delivery and optimization on the Play Store.

Open the terminal or command prompt.
Navigate to your project directory.
Run the following command to build the app bundle:
flutter build appbundle --no-tree-shake-icons

Support

Delighted to serve and support you! Contact our support team led by Muzammil Sumra on Skype

To help our customers, we constantly be in touch with every customer if they need any assistance regarding our product. We offer our customers a support from Mon – Fri 9.00am to 6.00pm IST (GMT +5.30) – We are a Team located in India – Asia.

Typically we reply our customers for all the questions and queries within 24 hours of time via comments, support forum or emails.

Your Feedback

Dear valuable customer, Thank you very much for choosing our product. It's our pleasure to serve top-notch service to you. Please give us your honest feedback that will help us to make a more strong and reliable product by click here Rate Us. Thank you very much.

Contact Us

WRTeam has creative and dedicated group of developers who are mastered in Apps Developments and Web Application Development with a nice in delivering quality solutions to customers across the globe. Contact us today to find out how we can help you or for freelance work.

Visit Us : https://wrteam.in

Mail Us : support@wrteam.in

Thank you very much.