Server

• VPS (Virtual Private Server)
• Shared Hosting

I recommend using a VPS for better performance and control over your environment.

• Linux OS (Recommended)
• 50 GB Storage (Minimum)
• 4 GB RAM (Minimum)
• 100 GB SSD (Preferred)

Web Server

• Apache

Make sure you have Apache web server Installed. If not, run the following Command in your terminal:

1. Begin by updating the local package index to reflect the latest upstream changes:

                                                   
                                                       sudo apt update
                                                   
                                               

2. Then, install the apache2 package:

                                                   
                                                       sudo apt install apache2
                                                   
                                               

3. After confirming the installation, apt will install Apache and all required dependencies.
4. At the end of the installation process, Ubuntu starts Apache. The web server will already be up and running. Make sure the service is active by running the command for the systemd init system:

                                                   
                                                       sudo systemctl status apache2
                                                   
                                               

   Expected output:

                                                   
                                                       ● apache2.service - The Apache HTTP Server
                                                       Loaded: loaded (/lib/systemd/system/apache2.service; enabled; vendor prese)
                                                       Active: active (running) since Tue 2022-04-26 15:33:21 UTC; 43s ago
                                                           Docs: https://httpd.apache.org/docs/2.4/
                                                       Main PID: 5089 (apache2)
                                                           Tasks: 55 (limit: 1119)
                                                           Memory: 4.8M
                                                           CPU: 33ms
                                                       CGroup: /system.slice/apache2.service
                                                           ├─5089 /usr/sbin/apache2 -k start
                                                           ├─5091 /usr/sbin/apache2 -k start
                                                           └─5092 /usr/sbin/apache2 -k start
                                                   
                                               

   As confirmed by this output, the service has Started Successfully. The best way to test this is to request a page from Apache.
5. You can access the default Apache landing page to confirm that the software is running properly through your IP address. When you have your server’s IP address, enter it into your browser’s address bar:

                                                   
                                                       http://your_server_ip
                                                   
                                               

   You will see the default Ubuntu Apache web page as shown below:
   
   

Database

• MySQL
• phpMyAdmin

MySQL

MySQL is an open-source relational database management system. It is essential for managing the data for your application. Make sure you have MySQL installed on your server. You can install it using the following command:

• Step 1 - Install MySQL

  Install MySQL on your server using the APT package repository:

  1. Update the package index:

                                                             
                                                                 sudo apt update
                                                             
                                                         

  2. Install the MySQL server package:

                                                             
                                                                 sudo apt install mysql-server
                                                             
                                                         

  3. Start the MySQL service:

                                                             
                                                                 sudo systemctl start mysql.service
                                                             
                                                         

• Step 2 - Configuring MySQL

  Run the MySQL secure installation script:

  1. Open the MySQL prompt:

                                                             
                                                                 sudo mysql
                                                             
                                                         

  2. Change the root user’s authentication method:

                                                             
                                                                 ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';
                                                             
                                                         

     Replace 'password' with a strong password of your choice.

  3. Exit the MySQL prompt:

                                                             
                                                                 exit
                                                             
                                                         

  4. Run the security script:

                                                             
                                                                 sudo mysql_secure_installation
                                                             
                                                         

  5. Follow the prompts to secure your MySQL installation.

• Step 3 - Testing MySQL

  Check MySQL status to ensure it is running:

                                                  
                                                      systemctl status mysql.service
                                                  
                                              

  Expected output:

                                                  
                                                      ● mysql.service - MySQL Community Server
                                                        Loaded: loaded (/lib/systemd/system/mysql.service; enabled; vendor preset: enabled)
                                                        Active: active (running) since Mon 2022-04-11 16:04:39 UTC; 2h 36min ago
                                                       Process: 2593 ExecStartPre=/usr/share/mysql/mysql-systemd-start pre (code=exited, status=0/SUCCESS)
                                                      Main PID: 2601 (mysqld)
                                                        Status: "Server is operational"
                                                         Tasks: 38 (limit: 1119)
                                                        Memory: 354.3M
                                                           CPU: 19.944s
                                                        CGroup: /system.slice/mysql.service
                                                                └─2601 /usr/sbin/mysqld
                                                  
                                              

  If MySQL isn't running, you can start it with the following command:

                                                      
                                                          sudo systemctl start mysql
                                                      
                                                  

  This command will initiate the MySQL service on your system.

phpMyAdmin

Learn how to install and configure phpMyAdmin on your server, simplifying the management of your MySQL Databases with a user-friendly web interface.

• Step 1 - Install phpMyAdmin

  1. Update the package index:

                                                             
                                                                 sudo apt update
                                                             
                                                         

  2. Download the phpMyAdmin Zip File to the server:

                                                             
                                                                 wget https://files.phpmyadmin.net/phpMyAdmin/5.2.0/phpMyAdmin-5.2.0-all-languages.zip
                                                             
                                                         

  3. Unzip the downloaded file:

                                                             
                                                                 unzip phpMyAdmin-5.2.0-all-languages.zip
                                                             
                                                         

  4. Move the extracted files to the appropriate location:

                                                             
                                                                 sudo mv phpMyAdmin-5.2.0-all-languages /usr/share/phpmyadmin
                                                             
                                                         

  5. Next, create tmp directory and set the proper permissions:

                                                             
                                                                 sudo mkdir /usr/share/phpmyadmin/tmp
                                                                 sudo chown -R www-data:www-data /usr/share/phpmyadmin
                                                                 sudo chmod 777 /usr/share/phpmyadmin/tmp
                                                             
                                                         

• Step 2 - Configure phpMyAdmin

  1. Now, you need to configure the webserver to serve phpMyAdmin on the network. First, create an Apache configuration file for phpMyAdmin and edit it in a text editor:

                                                             
                                                                 sudo vim /etc/apache2/conf-available/phpmyadmin.conf 
                                                             
                                                         

  2. Next, add the following content to the file:

                                                             
                                                                 Alias /phpmyadmin /usr/share/phpmyadmin
                                                                 Alias /phpMyAdmin /usr/share/phpmyadmin
     
                                                                 <Directory /usr/share/phpmyadmin/>
                                                                     AddDefaultCharset UTF-8
                                                                     <IfModule mod_authz_core.c>
                                                                         <RequireAny>
                                                                             Require all granted
                                                                         </RequireAny>
                                                                     </IfModule>
                                                                 </Directory>
     
                                                                 <Directory /usr/share/phpmyadmin/setup/>
                                                                     <IfModule mod_authz_core.c>
                                                                         <RequireAny>
                                                                             Require all granted
                                                                         </RequireAny>
                                                                     </IfModule>
                                                                 </Directory>
                                                             
                                                         

     Save your File. Press ESC key to switch to command mode. Then type :wq (colon + w + q) and hit Enter button.

  3. After making all the changes, make sure to start the Apache service to reload all settings:

                                                             
                                                                 sudo a2enconf phpmyadmin
                                                                 sudo systemctl restart apache2
                                                             
                                                         

• Step 3 - Configuring phpMyAdmin with Apache2

  1. Execute the following commands:

                                                             
                                                                 sudo a2dissite phpmyadmin
                                                                 sudo a2enconf phpmyadmin
                                                             
                                                         

  2. Open the Apache configuration file:

                                                             
                                                                 sudo nano /etc/apache2/apache2.conf
                                                             
                                                         

  3. Modify the code as follows:

                                                             
                                                                 <Directory /var/www/>
                                                                     Options Indexes FollowSymLinks
                                                                     AllowOverride None 
                                                                     Require all granted
                                                                 </Directory>
                                                             
                                                         

     TO

                                                             
                                                                 <Directory /var/www/>
                                                                     Options Indexes FollowSymLinks
                                                                     AllowOverride All 
                                                                     Require all granted
                                                                 </Directory>
                                                             
                                                         

     Once done, close the file.
  4. After executing the command, restart Apache:

                                                             
                                                                 sudo apt-get install libapache2-mod-php
                                                                 sudo service apache2 restart
                                                             
                                                         

• Step 4 - Access phpMyAdmin

  1. Setup Complete! You've Successfully configured phpMyAdmin on your system. Now, to access phpMyAdmin, use the following URL:

                                                             
                                                                 http://your-server-ip-domain/phpmyadmin
                                                             
                                                         

     Replace "your-server-ip-domain" with either "localhost" for local machines or your system's IP address for remote machines. If you've updated your DNS and pointed it to your server's IP address, you can use the domain name instead.
     
  2. Sign in using the Username and Password you use to access MySQL via the command line:
     

Programming Language

• PHP (Hypertext Preprocessor)
• Laravel (The PHP Framework)

Ensure PHP is Installed on your server. If not, run the following Command in your terminal:

1. Update the local package index to reflect the latest changes:

                                                   
                                                       sudo apt update
                                                   
                                               

2. Install the PHP package:

                                                   
                                                       sudo apt install php8.2 libapache2-mod-php8.2 php8.2-mysql
                                                   
                                               

3. Check the installed PHP version:

                                                   
                                                       php -v
                                                   
                                               

4. After executing the command, restart Apache:

                                                   
                                                       sudo service apache2 restart
                                                   
                                               

How to Deploy Admin Panel code on a server :

• VPS (Virtual Private Server)

  1. Upload the Zip File to Your Server

     ■  Connect to your VPS using an FTP client or SSH.

     ■  Upload the zip file containing your Admin Panel code to the server.

  2. Move the File to the Appropriate Directory

     ■  Navigate to the directory where you uploaded the file.

     ■  Move the zip file to the /var/www/html/ directory using the command:

                                                             
                                                                 mv your-file.zip /var/www/html/
                                                             
                                                         

  3. Unzip the File

     ■  Unzip the file using the following command:

                                                             
                                                                 unzip your-file.zip
                                                             
                                                         

  4. Rename the Folder

     ■  Rename the unzipped folder to admin:

                                                             
                                                                 mv your-unzipped-folder admin
                                                             
                                                         

  5. Visit Your Domain

     ■  Navigate to your domain URL. You should see the installation wizard. Follow the instructions to complete the setup.

• Shared Hosting

  1. Log in to cPanel

     ■  Access your hosting account and log in to cPanel.

  2. Open the File Manager

     ■  Go to the File Manager in cPanel.

  3. Navigate to the public_html Directory

     ■  Navigate to the public_html directory where your web files are hosted.

  4. Upload the Zip File

     ■  Upload the zip file containing your Admin Panel code to the public_html directory.

  5. Extract the Zip File

     ■  Right-click the uploaded zip file and choose "Extract" to unzip the contents.

  6. Rename the Folder

     ■  Rename the extracted folder to admin.

  7. Visit Your Domain

     ■  Navigate to your domain URL. You should see the installation screen. Follow the instructions to complete the setup.

How to Build Database on server :

• VPS (Virtual Private Server)

  1. Access phpMyAdmin

     ■  Once phpMyAdmin is installed and configured, access it by entering its URL in your web browser. Typically, you can access it using:

                                                             
                                                                 http://your_server_ip/phpmyadmin
                                                             
                                                         

  2. Login

     ■  You'll be prompted to log in to phpMyAdmin. Use the MySQL root Username and Password for authentication.

  3. Create a Database

     ■  Use the phpMyAdmin dashboard to create a new database. You can navigate to the "Database" section and click on the "New database" button. Then, provide a name for your new database and click on the "Create" button.

     
  4. Database Created

     ■  Now, Database is created Successfully.

• Shared Hosting

  1. Access cPanel

     ■  Log in to your shared hosting account's cPanel dashboard.

  2. Locate MySQL Databases

     ■  In the cPanel dashboard, find and click on the "MySQL Databases" icon or link.

     
  3. Create Database

     ■  Under the "Create New Database" section, enter a name for your new database and click the "Create Database" button.

     
  4. Create Database User

     ■  Scroll down to the "MySQL Users" section, provide a Username and Password for your new MySQL user, and click the "Create User" button.

     
  5. Assign Privileges

     ■  On the following screen, select "All Privileges" and then click the "Make Changes" button.

     
  6. Confirmation

     ■  You should receive a confirmation message indicating that the user has been successfully added to the database with all privileges.

  7. Database Created

     ■  Now, Database & User are created Successfully.

1. Installation Screen

   ■  Follow the on-screen instructions to begin the installation process.

   
2. Server Requirements & File Permissions

   ■  If the PHP version is Lower than 8.1 or any required extension is not installed, it will be highlighted in Red. Ensure that your server meets all these requirements and that the specified folders have Read & Write Permissions before proceeding with the installation.

   
3. Purchase Code Validation

   ■  Here, you will need to insert the purchase code obtained from CodeCanyon to authenticate your purchase and authorize your server to access the services.

   ■  To find your Purchase code you can visit this link: Where is My Purchase code?

   
4. Database Configuration

   ■  In this step, you need to provide the database connection details to configure your database properly.

   Enter the following information:

   ●  Database Host: The hostname of your database server (e.g., 'localhost').

   ●  Database Name: The name of your database.

   ●  Database User: The username for your database.

   ●  Database Password: The password associated with the database user.

   ■  Once all details are entered, click on the "Continue" button to verify the database connection.

   
5. Import Database or Backup Existing Database

   ■  If you have an existing database, it’s recommended to back it up before proceeding. If this is a new installation, follow these steps to import the new database:

   ●  Backup Existing Database: Create a backup of your current database to ensure no data is lost.

   ●  Import New Database: For a new installation, click the "Import Database" button to load the required schema and data.

   ■  Ensure you have completed this step to set up the database correctly before moving forward.

   
6. Admin Account Setup

   ■  To manage your application, you need to create an admin account. Enter the following details:

   ●  Admin Email: Provide a valid email address for the admin account.

   ●  Admin Password: Choose a secure password for the admin account.

   ■  Once you have entered these details, click "Continue" to proceed.

   
7. Complete Admin Panel Installation

   ■  The installation process is now complete. You can access the admin panel using the credentials you created.

   ●  Completion Screen: You will see a confirmation screen indicating that the installation is successful.

   ●  Access Admin Panel: Click on the "Admin Panel" button or navigate to the admin panel URL in your browser.

   ■  Congratulations! Your application is now installed and ready for use.

   
8. Admin Panel Login

   ■  The final step involves logging into the admin panel to start managing your application:

   ●  Admin Login Page: You will be presented with the admin login page (as shown below).

   ●  Enter Admin Credentials: Use the admin email and password you set up during the installation process to log in.

   ■  Once logged in, you can start configuring and managing your application from the admin panel.

   

Admin Profile

Use the following images to change Admin Profile Data & Password.

App Setting

Refer to the images below to modify App Settings, including changing the App Name, App Icon, App Description, and more.

API Configuration

Refer to the images below to manage your Base URL, and configure or start Your App.

Currency Settings

Refer to the images below to manage your Currency Settings. You can enter your currency details and manage Transactions.

Social Setting

Refer to the images below to modify your Social Settings and add your Social Media Links, such as YouTube, Instagram, Facebook, etc.

SMTP Setting

Refer to the images below to modify your SMTP Settings and configure Email Settings for Your Application. Ensure you input the correct details to enable email functionalities. You need to provide the following information:

• Host Name: (e.g., smtp.gmail.com)
• Port Number: (e.g., 587)
• Username: (e.g., admin@gmail.com)
• Password: Click Here to Get Password
• From Name: (e.g., DivineTechs)
• From Email: (e.g., admin@gmail.com)

This configuration will enable email functionalities for client applications.

Onboarding Screen

Refer to the images below to customize your Onboarding Screen and add your application Splash Screen. Ensure that the visuals align with your app's branding and user experience.

System Settings

Refer to the images below to manage your System Settings including Clearing Cache, Backup Database, Inserting Dummy Data, and Cleaning the Database.

Page Setting

To manage and customize your Social Pages, including About Us, Privacy Policy, Terms & Conditions, and Refund Policy, follow the instructions below.

In the Page Layout Setting section :

• Set Page Background Color : Use the color picker to set the background color of your page.
• Set Page Title Color : Adjust the title color to match your branding.

In the Page List :

• View Page : Click the Eye Icon to preview how the page will look to users.
• Edit Page : Click the Pencil Icon to make changes to the content and settings of each page.

Use the images below for reference :

Payment Option Setting

Use the following images to manage your Payment Gateway options, such as In-App Purchases, PayPal, Razorpay, Stripe etc.

Push Notification Setting

Use the following images to manage your Push Notification Settings and set up notification settings in OneSignal.

Admob Setting

Use the following images to manage your AdMob ads in the app, including Banner Ads, Interstital Ads & Reward Ads.

Manage Section

Refer to the images below image to Configure and Organize various sections of Your App, including the Layout and Content of the Home Page.

Step 1: Modify the Constant File

Make sure you have Apache web server Installed. If not, run the following Command in your terminal:

1. Open the Constant.dart file in your project.

                                                   
                                                       static String appName = "yourappname";
                                                   
                                               

2. Find the line where the app name is defined:
   
3. Change 'yourappname' to your desired app name. For example:

                                                   
                                                       static String appName = "MyNewAppName";
                                                   
                                               

Step 2: Rename the App Using Flutter Command

1. Open your terminal or command prompt.
2. Run the following command to activate the rename package:

                                                   
                                                       flutter pub global activate rename
                                                   
                                               

3. Use the rename command to set the new app name across iOS, Android, and web platforms. Replace "YourAppName" with your desired app name:

                                                   
                                                       rename setAppName --targets ios,android,web --value "MyNewAppName"
                                                   
                                               

Step 1: Modify the Constant File

1. Open the Constant.dart file in your project.

                                                   
                                                       static String appPackageName = "com.example.yourappname";
                                                   
                                               

2. Find the line where the package name is defined:
   
3. Change 'com.example.yourappname' to your desired package name. For example:

                                                   
                                                       static String appPackageName = "com.example.mynewappname";
                                                   
                                               

Step 2: Rename the Package Using Flutter Command

1. Open your terminal or command prompt.
2. Use the rename command to set the new package name for both Android and iOS platforms. Replace "com.example.yourappname" with your desired package name:

                                                   
                                                       rename setBundleId --targets android,ios --value "com.example.mynewappname"
                                                   
                                               

Step 1: Place Your App Icon in the Project

1. Ensure that your app icon is in PNG format and named 'appicon.png'.
2. Place your 'appicon.png' file in the'assets/appicon' directory of your project.
   

Step 2: Update Your Project Configuration

1. Open your terminal or command prompt.
2. Run the following command to fetch the latest dependencies:

                                                   
                                                       flutter pub get
                                                   
                                               

3. Run the command to set the new app icon:

                                                   
                                                       flutter pub run flutter_launcher_icons
                                                   
                                               

Troubleshooting

If you encounter any issues while changing the app icon, please feel free to create a support ticket at DivineTechs Support.

Step 1: Modify the Color Constants

1. Open file color.dart which located lib => utils => colors.dart
   
2. Locate the color constants defined for your app's primary colors:

                                                   
                                                       const colorPrimary = Color(0xFFyourhexa); 
                                                       const colorPrimaryDark = Color(0xFFyourhexa); 
                                                       const colorAccent = Color(0xFFyourhexa);
                                                   
                                               

3. Replace the placeholder hex color codes (0xFFyourhexa) with your desired hex color codes. For example:

                                                   
                                                       const colorPrimary = Color(0xFF123456); 
                                                       const colorPrimaryDark = Color(0xFF654321); 
                                                       const colorAccent = Color(0xFFabcdef);
                                                   
                                               

Step 2: Update Other Colors According to Your Branding

1. Review the file to find and update any other color constants according to your app's branding.
2. Replace the hex color codes for these additional colors as needed to match your design specifications.

Step 1: Copy Base URL from Admin Panel

1. Log in to your admin panel.
   
2. Navigate to the app settings section where the base URL is provided.
3. Copy the base URL from the admin panel. Refer to the screenshot below for guidance.
   

Step 2: Paste the Base URL in App Constants

1. Open the Constant.dart file in your project.
2. Locate the line where the base URL is defined:

                                                   
                                                       final String baseurl = " Add your Base URL here";
                                                   
                                               

3. Replace "https://example.com" with the base URL you copied from the admin panel. For example:

                                                   
                                                       final String baseurl = "https://yourbaseurl.com";
                                                   
                                               

4. check screenshot below
   

Ensure that you have set up the admin panel correctly before proceeding with this step. If the admin panel is not set up, the app will not run and will be stuck on the splash screen. You can follow the admin panel documentation to learn how to set it up. Click here

Step 1: Prepare Your Splash Screen Design

1. Ensure that your splash screen design is ready and saved as splash.png.
2. Make sure the image dimensions and resolution are appropriate for your app's splash screen.

Step 2: Replace the Splash Screen Image

1. Navigate to the assets/images folder in your project.
2. Replace the existing 'splash.png' file with your new 'splash.png' file.
   
   

Ensure that the splash.png file is named correctly and placed in the assets/images directory.

Step 1: Visit Firebase Console:

• Open your web browser and go to the Firebase Console.

Step 2: Sign In/Create Account:

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

Step 3: 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."

Example Screenshot

Step 1: Go to Firebase Dashboard:

• After creating your project, go to the Firebase Dashboard.
• Click on the Flutter icon as shown in the screenshot below.

Note: Make sure to change the package name first.

Step 2: Login to Firebase on IDE (VSCode/Android Studio):

1. Open your IDE and run the following command in the terminal to login to Firebase & this command will redirect you to a browser where you will need to allow permissions to access Firebase.

                                                   
                                                       firebase login
                                                   
                                               

   
2. Activate FlutterFire CLI:

   Run the following command in the terminal to activate the FlutterFire CLI:

                                                   
                                                       dart pub global activate flutterfire_cli
                                                   
                                               

   
3. Copy command from your firebase as per below screenshot & Run in the terminal:
   
   
4. If prompted with Generated FirebaseOptions file /lib/firebase_options.dart already exists, do you want to override it? (y/n), press y and hit enter to overwrite.
   
5. You will be prompted to select the platforms your configuration should support. Use the arrow keys and space to select all platforms (android, ios, macos, web, windows) and press enter.
   
6. After running the command, click on “Continue to console” as shown in the screenshot below.
   

Note: If you face any issues while installing the FlutterFire CLI tool or running Firebase commands, you may need to set up Firebase manually. Please note that manual setup of Firebase is not covered under our support. If the official SDKs do not work, we recommend referring to the official Firebase documentation for further assistance.

Get SHA1 & SHA256 Keys

1. Go to your project directory in VS Code & Open the terminal.
2. Run cd android to navigate to the Android directory:

                                                   
                                                       cd android
                                                   
                                               

   
3. Run ./gradlew signingReport to generate the signing report:

                                                   
                                                       ./gradlew signingReport
                                                   
                                               

   
4. It will display the SHA1 and SHA256 keys similar to the screenshot below.
   
5. Navigate to your Firebase project settings & Add the generated SHA1 and SHA256 keys to your Firebase project one by one.
   
6. After adding the keys, download the google-services.json file from your Firebase project settings.
   
7. Place the google-services.json file in the android/app directory of your Flutter project.If the file already exists, replace it with the new one.
   

Note: Ensure that you follow each step carefully to correctly configure Firebase for your Android app. Verify that the google-services.json file is placed in the correct directory and that the SHA keys are added to Firebase.

Download GoogleService-Info.plist

1. Go to your project directory in VS Code & Open the terminal.In the Firebase Console, Select your project & Download the GoogleService-Info.plist file.
   
2. Place the GoogleService-Info.plist file in the 'ios/Runner' directory of your Flutter project.

                                                   
                                                       •   Open Xcode.
   	                                                •	Right-click on the project name in the project navigator.
   	                                                •	Select “Add Files to [your project name]”.
   	                                                •	Select the GoogleService-Info.plist file you downloaded.
                                                   
                                               

3. Example Screenshot:
   
   

Note:

• Ensure that the GoogleService-Info.plist file is added correctly to your Xcode project.
• Verify that the file is placed in the correct directory (ios/Runner) in your Flutter project.

Overview

To enable login with OTP, Gmail, and Apple, you need to configure Firebase Authentication. If you skip this step, you will not be able to log into the app.

Step-by-Step Instructions

Step 1: Mobile Auth

1. In the Firebase Console, go to the Authentication section. Turn on the Phone login by tapping on the switch button as shown in the image below.
2. Add a Firebase testing number for testing purposes to avoid temporary blocks due to multiple logins with the same number or device.
3. Example Screenshot:
   
   

Step 2: Gmail - Apple Auth

1. Tap on the switch button to enable Gmail login as shown in the image below.
   
2. Tap on the switch button to enable Apple login as shown in the image below.
   

Step 2: Configure Cloud Messaging API for Gmail & OTP Release App

1. Go to Google Cloud Console using this the link: Google Cloud Console.
2. Search for “Firebase Cloud Messaging” on Google Cloud Console and enable it as shown in the screenshot below.
   
   
3. Search for “Google Play Integrity” on Google Cloud Console and enable it as shown in the screenshot below.
   
   

Note:
Make sure to add a Firebase testing number for testing purposes. If you login multiple times with the same number or device, Firebase may temporarily block you.

Overview

Setting up push notifications is essential for engaging users with timely alerts and updates. This section provides detailed, step-by-step instructions to configure push notifications for both Android and iOS platforms using OneSignal and Firebase. By following these steps, you'll be able to send notifications that enhance user experience and engagement in your mobile app.

1) Android Setup

Step 1: Generate Firebase Service Account Key

1. Open Firebase Console and navigate to Project Settings then Select the Service Accounts tab & Click on Generate new private key; a file will be downloaded. Save this file in a secure location.
   
2. Create or log in to your OneSignal account at OneSignal Dashboard.
3. Create a new app by entering the App Name and Organization Name (create an organization if it doesn’t exist) & Select Google Android (FCM) as the platform. Click on Next
   
4. Upload the Firebase service account key file downloaded in Step 1. & Click Save & Continue.
   
5. Choose Flutter as the platform and proceed to save the configuration.
   
6. Your OneSignal Android setup is now complete.

2) iOS Setup

Requirements:

1. An iOS mobile app
2. A paid Apple Developer Account with Admin Role
3. A OneSignal Account
4. Mac computer with Xcode 12+
5. Xcode project with Push Notification capability enabled

Step 1: Generate a .p8 Key for APNs Authentication

1. Log in to your Apple Developer Account Apple Developer Account.
2. Navigate to Certificates, Identifiers & Profiles > Keys and click the Blue + button.
   
3. Select Apple Push Notifications service (APNs) and enter a name for the key.
   
4. Click Continue and then Register.
5. Download your new .p8 key and save it in a secure location.

Note:
You can only download the .p8 file once, so make sure to keep it in a safe place.

Step 2: Upload Your Push Key to OneSignal

1. Team ID: Found in the top right of your Apple Developer account AND Key ID: Found in the Keys section of your Apple Developer account.
   
2. App Bundle ID: Found in the Identifiers section of your Apple Developer account or within Xcode > Main App Target > Signing & Capabilities.
   
3. In the OneSignal dashboard, navigate to Settings > Platforms > Apple iOS (APNs) Settings.
   
4. In the OneSignal dashboard, navigate to Settings > Platforms > Apple iOS (APNs) Settings & Choose .p8 Auth Key (Recommended) for the APNs Authentication Type.
   
5. Upload the .p8 file, fill in the Key ID, Team ID, and Bundle ID fields, and then click 'Save'.
6. Choose Flutter as the platform and proceed to save the configuration.
   
7. Your OneSignal iOS setup is now complete.

With these steps, you should have successfully configured push notifications for both Android and iOS using OneSignal. If you encounter any issues, ensure all steps are followed accurately.

1. Ensure that your app displays appropriate default images for both portrait and landscape orientations by following these steps:
2. Image Files:

                                                   
                                                       Portrait Image: no_image_port.png
                                                       Landscape Image: no_image_land.png
                                                   
                                               

   Recommended Image Ratios:

                                                   
                                                       Landscape Ratio: 16:9 (Examples: 1920×1080, 1280×720)
                                                       Portrait Ratio: 9:16  (Examples: 1080x1920, 720x1280)
                                                   
                                               

3. File Path:

                                                   
                                                       Place the images in the following directory:
                                                       Assets => images
                                                   
                                               

4. Steps to Update:

                                                   
                                                       •   Create or edit your default images according to the recommended ratios.
   	                                                •	Save the portrait image as no_image_port.png.
   	                                                •	Save the landscape image as no_image_land.png.
   	                                                •	Place the images in the Assets => images directory in your project.
                                                   
                                               

   

   By following these guidelines, your app will display well-proportioned images for different orientations, enhancing the user experience.

This section explains how to update the OneSignal push notification icons in your app. Ensure that you create the icons with the correct sizes and use the specified names before replacing the existing files.

1. 1. File Path

   Navigate to the following directories in your project to locate the current notification icons:

                                                   
                                                       Android > app > res > drawable-mdpi
                                                       Android > app > res > drawable-hdpi
                                                       Android > app > res > drawable-xhdpi
                                                       Android > app > res > drawable-xxhdpi
                                                       Android > app > res > drawable-xxxhdpi
                                                   
                                               

2. 2. Icon Sizes and Naming

   Create new icons with the following sizes and replace the existing icons with the exact names as mentioned:

                                                   
                                                       MDPI (drawable-mdpi):
                                                       Size: 24x24 pixels
                                                       Icon name: ic_stat_onesignal_default.png
   
                                                       HDPI (drawable-hdpi):
                                                       Size: 36x36 pixels
                                                       Icon name: ic_stat_onesignal_default.png
   
                                                       XHDPI (drawable-xhdpi):
                                                       Size: 48x48 pixels
                                                       Icon name: ic_stat_onesignal_default.png
   
                                                       XXHDPI (drawable-xxhdpi):
                                                       Size: 72x72 pixels
                                                       Icon name: ic_stat_onesignal_default.png
   
                                                       XXXHDPI (drawable-xxxhdpi):
                                                       Size: 96x96 pixels
                                                       Icon name: ic_stat_onesignal_default.png
   
                                                       Large Icon for Notifications (drawable-xxxhdpi):
                                                       Size: 256x256 pixels
                                                       Icon name: ic_onesignal_large_icon_default.png
                                                   
                                               

3. 3. Replace Existing Icons

                                                   
                                                       •   Create or resize your notification icons to match the sizes listed above.
   	                                                •	Replace the existing icons in each directory with your newly created icons, ensuring the names remain exactly as specified.
                                                   
                                               

   Please refer to the provided screenshot for additional details on the icon replacement process.

   

1. File Path

   Navigate to the following directory in your project to locate the current splash screen GIF:

                                                   
                                                       Web > Assets > loading.gif
                                                   
                                               

   Replace the GIF

                                                   
                                                       Create or select your new GIF file for the splash screen.
                                                       Name the file loading.gif.
                                                       Replace the existing loading.gif file in the Web > Assets directory with your new GIF.
                                                   
                                               

2. Rebuild the Web Version

   After replacing the GIF, ensure to rebuild the web version to apply the changes:

   

                                                   
                                                       Command: flutter build web --web-renderer auto --release
                                                   
                                               

Step-by-Step Instructions to Generate the App

Create a keystore to securely sign your Android application.

1. Generate Keystore

1. Create a keystore to securely sign your Android application.
2. Mac/Linux:

                                                   
                                                       keytool -genkey -v -keystore yourappname.jks -keyalg RSA -keysize 2048 -validity 10000 -alias yourappname
                                                   
                                               

3. Windows:

                                                   
                                                       keytool -genkey -v -keystore yourappname.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias yourappname
                                                   
                                               

   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., 'upload-keystore.jks') will be saved in the 'android/app' directory.

2. Configure key.properties

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

1. Open the key.properties file in the android directory.
   
2. Add the following lines to the file:

                                                   
                                                       storePassword=your_keystore_password
                                                       keyPassword=your_alias_password
                                                       keyAlias=yourappname
                                                       storeFile=yourappname.jks
                                                   
                                               

3. Save the key.properties file.

3. Update build.gradle

1. In the android/app/build.gradle file, change:

                                                   
                                                       signingConfig signingConfigs.debug
                                                   
                                               

2. To:

                                                   
                                                       signingConfig signingConfigs.release
                                                   
                                               

   

4. Generate Release APK

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

1. Open the terminal or command prompt & Navigate to your project directory. Run the following command to build the release APK:

                                                   
                                                       flutter build apk --release
                                                   
                                               

5.Generate App Bundle

Note:
Before generating the App Bundle, ensure you have completed the 'Update key.properties' step to configure your keystore information. Refer to steps 1 and 2 for details. Package the app as an Android App Bundle for efficient delivery and optimization on the Play Store.

1. Open the terminal or command prompt & Navigate to your project directory. Run the following command to build the release APK:

                                                   
                                                       flutter build appbundle
                                                   
                                               

Step-by-Step Instructions to Generate the App

Create a keystore to securely sign your Android application.

1. Generate Keystore

1. Create a keystore to securely sign your Android application.
2. Mac/Linux:

                                                   
                                                       keytool -genkey -v -keystore yourappname.jks -keyalg RSA -keysize 2048 -validity 10000 -alias yourappname
                                                   
                                               

3. Windows:

                                                   
                                                       keytool -genkey -v -keystore yourappname.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias yourappname
                                                   
                                               

   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., 'upload-keystore.jks') will be saved in the 'android/app' directory.

2. Configure key.properties

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

1. Open the key.properties file in the android directory.
   
2. Add the following lines to the file:

                                                   
                                                       storePassword=your_keystore_password
                                                       keyPassword=your_alias_password
                                                       keyAlias=yourappname
                                                       storeFile=yourappname.jks
                                                   
                                               

3. Save the key.properties file.

3. Update build.gradle

1. In the android/app/build.gradle file, change:

                                                   
                                                       signingConfig signingConfigs.debug
                                                   
                                               

2. To:

                                                   
                                                       signingConfig signingConfigs.release
                                                   
                                               

   

4. Generate Release APK

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

1. Open the terminal or command prompt & Navigate to your project directory. Run the following command to build the release APK:

                                                   
                                                       flutter build apk --release
                                                   
                                               

5.Generate App Bundle

Note:
Before generating the App Bundle, ensure you have completed the 'Update key.properties' step to configure your keystore information. Refer to steps 1 and 2 for details. Package the app as an Android App Bundle for efficient delivery and optimization on the Play Store.

1. Open the terminal or command prompt & Navigate to your project directory. Run the following command to build the release APK:

                                                   
                                                       flutter build appbundle
                                                   
                                               

Step-by-Step Instructions to Setup Firebase

1. Open Firebase Account:

1. Log in to your Firebase account and navigate to the Project Settings. (See the screenshot below for reference.)
   
2. Copy the Firebase configuration code provided in the Project Settings. (See the screenshot below for reference.)
   
3. Paste it into the index.html file located in the web folder. (Refer to the screenshot below.)
   

2. Set Up Google Authentication:

1. In Firebase, go to Authentication > Sign-in Method. Edit the Google sign-in method.
   
2. Copy the Web Client ID as shown in the screenshot below.
   
3. Paste the Web Client ID into the head section of the index.html file. (Refer to the screenshot below.)
   

3. Authorize Domain:

1. In Firebase, navigate to Authentication > Settings > Authorized Domains.
   
2. Add the main domain where you plan to upload your website. (Check the screenshot below.)
   

4. Update Google Cloud Console:

1. Open the Google Cloud Console & Go to APIs & Services > Credentials. Click here
   
2. Find the Web client (auto-created by Google Service) and add your full domain name. (See the screenshot below for guidance.)
   

You've successfully set up Firebase for the web version of your app.

1. Run Web on Chrome:

1. If web support is not enabled, run the following command:

                                                   
                                                       flutter config --enable-web
                                                   
                                               

2. Use the following command to run your app on Chrome:

                                                   
                                                       flutter run -d chrome --web-renderer html
                                                   
                                               

2. Build Web Version:

1. Make a build of the web version using the command below:

                                                   
                                                       flutter build web --web-renderer auto --release
                                                   
                                               

3. Deploy the Web Version:

1. Upload the contents of the build / web directory to your web hosting service.
2. Test the deployed web version on multiple browsers and devices to ensure everything works as expected.