# Introduction

Version: 3.0.0 (Last Updated: 05-01-26)

### Quizhour - Flutter Quiz App for Android & iOS with Admin Panel

Build your own quiz app with your own content.

> Product Details: <https://1.envato.market/quizhour>
>
> Admin Panel: [https://admin-quizhour.web.app](https://admin-quizhour.web.app/)
>
> Android Demo: [Google Play](https://play.google.com/store/apps/details?id=com.mrblab.quizhour)
>
> iOS Demo: [AppStore (TestFlight)](https://testflight.apple.com/join/G1H0zDfx)

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FA9iNkEMWgNIIMUN5sT9l%2Fqh_feature_graphic.png?alt=media&amp;token=ec94bf84-1a24-4d81-897b-b6f1395d28bf" alt=""><figcaption></figcaption></figure>

### License Details

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2F6EOpBvBm6qi99Y7RuM9X%2Flicense.png?alt=media&amp;token=788fa0f9-3382-42c6-95b9-171ec860629a" alt=""><figcaption></figcaption></figure>


# Changelogs

Quizhour is constantly being updated with new features, bug fixes, and adjustments. Below is a full listing of change log information.

## Version: 3.0.0

Biggest update after release. Lots of new features and improvements.

5 January 2026

{% code fullWidth="false" %}

```
- Added the ability to add unlimited options. Previously, it was fixed at 4.
- Added quiz discussion feature with likes, dislikes, and reply options.
- Added live quizzes. Live exams can be taken with this.
- Added adaptive dark mode.
- Added my quizzes tab, where users can view their played quizzes. 
- Added the ability to show my answers and control the 'play again' button from the admin.
- Each quizplay will be saved now, and the admin can view the overview.
- Users can view their answers and statistics.
- Improved point history.
- Improved self-challenge mode with a random option. 
- Instant answers will be shown with question explanation for self-challenge mode.
- Added the login with phone option with OTP and removed Facebook login.
- Improved leaderboard screen. Now it will show all users' data asynchronously.
- Added skip option to the quiz settings, where users can skip any question while playing.
- Added instant answers and explanation feature to the quiz settings,
where right and wrong answers will show instantly after confirming any question. 
This can be enabled/disabled from the admin panel.
- Added Grid option layout for options where the admin can set a list or grid layout for options. 
This can be customized for each question from the admin panel.
- Improved quiz completed screen with congratulatory animation. 
Additionally, added an 'Incorrect Answers' button to review the incorrect answers.
- Improved quiz overview.
- Improved question explanation with all options.
- Updated with Flutter latest version 3.38.5 [app & admin]
```

{% endcode %}

Changed Files (Admin and App)

```
- Use the latest source code
- Changes in Database Security Rules (3.2)
- Changes in Database Index Setup (3.3)
```

## Version: 2.1.6

> 26 October 2025
>
> ```
> - Updated with flutter latest version 3.35.6 [app & admin]
> - Added support for 16 KB memory page size requiremnts for Google Play Store [app]
> ```

> Changed Files (Admin)
>
> ```
> - lib/components/category_dropdown.dart
> - lib/components/quiz_dropdown.dart
> - lib/components/set_quiz_order.dart
> - lib/forms/question_form/question_form.dart
> - lib/forms/quiz_form.dart
> - lib/providers/categories_provider.dart
> - lib/providers/menu_provider.dart
> - lib/providers/user_data_provider.dart
> - lib/providers/user_role_provider.dart
> - lib/tabs/categories/category_order.dart
> - lib/tabs/dashboard/purchase_bar_chart.dart
> - lib/tabs/dashboard/user_bar_chart.dart
> - lib/tabs/notifications/notifications.dart
> - lib/tabs/purchases/purchases.dart
> - lib/tabs/settings.dart
> - pubspec.yaml
> ```
>
> Changed Files (App)
>
> ```
> - android/app/build.gradle
> - android/gradle/wrapper/gradle-wrapper.properties
> - android/settings.gradle
> - ios/Podfile
> - pubspec.yaml
> ```

## Version: 2.1.4

> 05 May 2025
>
> ```
> - Updated with flutter latest version 3.32.0 [app & admin]
> ```

> Changed Files (Admin & App)
>
> ```
> - Many files have changed. It's better to use the new source code.
> ```

## Version: 2.1.3

> 21 November 2024
>
> ```
> - Fixed an issue where random question ordering weren't working [app]
> - Fixed youtube video issues [app]
> - Improved drag and drop question type [app] 
> - Updated with flutter latest version 3.24.5 [app & admin]
> ```

> Changed Files (App)
>
> ```
> - Many files have changed. It's better to use the new source code.
> ```

## Version: 2.1.2

> 08 June 2024
>
> ```
> - Removed firebase legacy api and added new recommended api for firebase push notifications. [admin]
> - Fix: Images in options and explanation were not showing [app] 
> - Updated with flutter latest version 3.22.1 [app & admin]
> ```

> Changed Files (Admin)
>
> New configurations for Notifications: [<mark style="color:purple;">Click here</mark>](https://docs.quizhour.mrb-lab.com/admin/3.-firebase-setup/3.4-push-notification-setup)
>
> ```
> - pubspec.yaml
> - analysis_options.yaml
> - web/index.html
> - lib/configs/fcm_config.dart (new file added)
> - lib/forms/notification_form.dart
> - lib/services/notification_service.dart
> - lib/utils/styles.dart
> ```

> Changed Files (App)
>
> ```
> - pubspec.yaml
> - lib/pages/home.dart
> - lib/pages/intro.dart
> - lib/pages/question_explaination.dart
> - lib/pages/question_overview.dart
> - lib/pages/quiz_screen/quiz_options.dart
> - lib/pages/settings.dart
> - lib/tabs/home_tab.dart
> ```

## Version: 2.1.0

Major update and recommended to all.

> 8 March 2024
>
> ```
> - Redesigned admin layout - A fresh new look, faster and smoother than before [admin]
> - Added the ability to import CSV questions (Upload questions in bulk) [admin]
> - Added a separate tab for purchases history and added purchases count [admin]
> - Added new question type - Fill in the blanks with draggable options
> - Added the ability to sort categories [admin]
> - Added user registration and purchases bar chart [admin]
> - Fixed home tab null issues [app]
> - Fixed issues on deleting accounts and logout [app]
> - Quizscreen next button placement and banner ads improvements [app]
> - Fix: Notification bar subtitle with show actual body content instead of 'Click to read more details' text
> - Fix: Image link validation in text fields were not working [admin]
> - 10+ bug fixes and UI improvements
> - Updated with Flutter latest version 3.19.x [app and admin]
> ```

> Changed Files (Admin)
>
> ```
> - pubspec.yaml
> - web/index.html
> - assets/
> - lib (all folders and files except configs/config.dart file)
> - firebase security rules are upadted.
> ```

> Changed Files (App)
>
> ```
> - pubspec.yaml
> - android/build.gradle
> - android/app/build.gradle (Android package name needs to be changed manually)
> - android/settings.gradle
> - assets/translations (Added a new key at the bottom of each JSON files)
> - lib/ (all folders except configs folder and firebase_options.dart file)
> ```

## Version: 2.0.2

Not recommended for existing buyers

> 19 November 2023
>
> ```
> - Updated with flutter latest version 3.16.x [app and admin]
> ```

> Changed Files (App)
>
> ```
> - lib/pages/home.dart
> - lib/pages/quiz_screen.dart
> - pubspec.yaml
> ```

Changed Files (Admin)

```
- pubspec.yaml
```

## Version: 2.0.1(hotfix-1)

Not recommended for existing buyers

> 17 October 2023
>
> ```
> - Updated with flutter latest version 3.13.7 [app and admin]
> ```

> Changed Files (App)
>
> ```
> - lib/pages/forgot_password.dart
> - lib/pages/login.dart
> - lib/pages/sign_up.dart
> - lib/services/app_service.dart
> - lib/widgets/html_body.dart
> - pubspec.yaml
> ```

Changed Files (Admin)

```
- pubspec.yaml
```

## Version: 2.0.1

> 20 August 2023
>
> ```
> - Fixed Youtube video player issue
> ```

> Changed Files (App)
>
> ```
> - lib/services/app_service.dart
> - lib/widgets/video_player_widget.dart
> - pubspec.yaml
> ```

## Version: 2.0.0(hotfix-1)

Not recommended for existing buyers

> 25 June 2023
>
> ```
> - Fixed count issues on updating quizzes and questions. [admin]
> - Fixed an issue where the timer on the quiz screen was always visible. [app]
> ```

## Version: 2.0.0

Major update and recommended to all.

> 22 May 2023
>
> ```
> - Added material 3 support [app]
> - Added quiz and question order [admin]
> - Added audio and video questions
> - Added image options
> - Added question explanation
> - Added question bookmark [app]
> - Added completed quizzes history
> - Added completed quizzes checkmark [app]
> - Added points history
> - Added user information view from admin panel [admin]
> - Added the ability to show 2 special categories and its quizzes in the home tab and which are controllable from the admin panel.
> - Added the ability to enable/disable optional features easily.
> - Added In-App-Purchase feature and points store: Ability to sell points to users (Extended license required)
> - Added the ability to edit user points from the admin panel [admin]
> - Fixed text wrapping issues on smaller screens [app]
> - Fixed font size issue in quiz details screen
> - Fixed the loading issue in the splash screen when users deleted their accounts.
> - From now, the Featured section will show featured categories instead of quizzes. [deprecated]
> - Fixed 10+ bugs
> - App UI Improvements
> - Admin UI Improvements
> - Updated with Flutter latest version v3.10.x
> - Updated all packages and more..
> ```

## Version: 1.0.6

Not recommended for existing buyers

> 30 April 2023
>
> ```
> - Updated with flutter latest version 3.7.x
> ```

## Version: 1.0.4

Not recommended for existing buyers

> 01 February 2023
>
> ```
> - Updated with flutter latest version 3.7.x
> ```

## Version: 1.0.3 (hotfix)

> 25 January 2023
>
> ```
> - Fixed loading issue in the splash screen
> ```

## Version: 1.0.3

> 17 January 2023
>
> ```
> - Initial release
> ```


# Getting Started

Welcome to the QuizHour Configuration Document. This is the installation doc for both admin and app. You can build the admin panel and app (Android & iOS) by following this doc.

So, You will get two source code files. One is for the Admin Panel and the other one is for the App. Both are developed on the flutter framework. So, You need to install flutter on your computer first to set up both. You need to follow the admin panel setup first and then go for the app setup.

{% hint style="info" %}
Note: We provide installation/reskin service for the QuizHour app. If you can’t do the installation by yourself, we can do that for you. You can check out our [Installation Plans](https://www.mrb-lab.com/installation-plans/quizhour) for more details.
{% endhint %}


# 1. Flutter Installation

The complete application (both admin & app) has been developed & built on Flutter. First, You have to install flutter on your computer. You can use Both Visual Studio Code & Android Studio as IDE for Flutter. The steps are the same for both IDE. We have used Visual Studio Code. So, Our Setup will be based on this IDE.

> To install flutter on your computer, follow the official documentation from Google. Flutter Official Site: <https://flutter.dev/>.

You can follow these youtube videos to install flutter also.

> * For Mac: <https://www.youtube.com/watch?v=9GuzMsZQUYs>
> * For Windows: <https://www.youtube.com/watch?v=T9LdScRVhv8>

{% hint style="warning" %}
**The recommended compatible Flutter version is 3.32.0**
{% endhint %}

{% hint style="info" %}
Note: A Mac (Apple Desktop/laptop) device and an apple developer account are required for the iOS setup. If you don’t have both of them, you can ignore the iOS steps.
{% endhint %}


# 2. Code Setup

After purchasing the app you will get a .zip file. Unzip it. Inside the **main\_files** folder, you will get a folder named **quiz\_admin**. This is the source code of the admin app. You have to work on this to set up your admin panel. Now open your IDE(Android Studio/VSCode) and open the **quiz\_admin** folder on your IDE. Wait some time to load the project.

Now go to the IDE terminal and run the following commands one after one :&#x20;

After that, run the following command below:

```
flutter clean
```

```
flutter pub get
```

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FY8jTs6bxjqt6vjnZkasz%2FScreenshot%202022-12-16%20at%2010.37.55%20PM.png?alt=media&amp;token=5c24c393-2604-4795-a4ab-92a21a91ae23" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Make sure these commands should be run from the root directory of the code.
{% endhint %}

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


# 3. Firebase Setup

We have used the Firestore Database from Google as the backend for this project.

* &#x20;First, Go to the [Firebase Console](https://firebase.google.com/) and sign in with your email account and go to the console.
* Create a project by your app name. And go to the project overview.

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FrRAsOgiteJnpvTmw0GbN%2FScreenshot%202022-12-16%20at%2010.45.10%20PM.png?alt=media&amp;token=12def6bf-71f3-452a-884d-4025a8eec9f9" alt=""><figcaption></figcaption></figure></div>

* Click on the **plus icon** and then click on the **web icon**. You will see a popup like the second picture below:

<figure><img src="https://lh4.googleusercontent.com/hD1-pDhSNGzuuvvkwK8CKokkPU69yxD4S1hGGho96GMq6yFjQEe4AflMA3fcWie_QzO_aq1_Fow3c7ehze5-lh39A7a5981THr1S8tYlRO4i2a6F3m0NFnis3c0fy_JQOe7m6y4O0ReTrQCbNIuR6Dh3nV2Z_KGLyPJi9Bv5Fx0rPfWBgyiBZSAR0Yyj" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh5.googleusercontent.com/Zz9MZPGnp6xpddwyGjKE-2ckHITSlR3z5rFqzPmDtXHzRUKZ0ao02VMXzCUJc_9Axh92YLVtyBv5IJSUNDuD8_aymPCjRzoryA3z4mMMEtniaS1ZLTnzLVCbjP-AT7t78tEfbAUjFJNQfwrNfAZRxXxEXIhoYQi-9j9_UlvawW3tD7fAgI4KESRwC0FP" alt=""><figcaption></figcaption></figure>

* Input the name as **Admin Panel** and fill in the checkbox because you need hosting too and then click on register app. After that, Skip the other options by clicking next. (Don’t input a custom name for hosting else you need extra setup for this which is not recommended)
* Now go to **Project Settings**. At the bottom, Select the **Admin Panel** and copy the selected lines shown in the picture below:

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2F7KBvxmC3g2IWPwSVBCOJ%2FScreenshot%202022-12-17%20at%201.43.34%20PM.png?alt=media&amp;token=c7c9dec2-bf98-4175-a87a-885ed86b98c8" alt=""><figcaption></figcaption></figure>

* Now, go to your IDE and open the **lib/firebase\_option.dart** file and paste the line there.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FcOjO4fQ9qJNtL2iCMXgw%2FScreenshot%202022-12-17%20at%201.46.37%20PM.png?alt=media&amp;token=01d51393-ad49-4b90-8251-7520790f6a13" alt=""><figcaption></figcaption></figure>

That's it.


# 3.1 Firestore Database Setup

Follow the steps below:

* From your firebase console, click on the **Firestore Database** and then click on the create database button.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2F8g8UeSR8DYNvouYESwuS%2FScreenshot%202022-12-16%20at%2011.01.06%20PM.png?alt=media&amp;token=8f53ce28-3830-472b-b1a3-474faf98473d" alt=""><figcaption></figcaption></figure>

* Now select the production mode and click on **Next > Enable**.


# 3.2 Database Security Rules

* From the Firestore Database, Click on the **Rules** tab and copy and paste the following code below:

{% code title="Firestore Security Rules" %}

```firestore-security-rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    
    match /users/{userId} {
    	allow read: if true;
      allow write: if isUserSignedIn() && request.auth.uid == userId || isAdmin();
      
      // New - point history subcollection
    	match /points_history_new/{historyId} {
  			allow read : if true;
      	allow write: if isUserSignedIn() && request.auth.uid == userId || isAdmin();
			}
    }
    
    
    match /questions/{document=**} {
    	allow read : if true;
      allow write: if isUserSignedIn() && (isAdmin() || isEditor());
    }
    
    match /quizes/{document=**} {
    	allow read : if true;
      allow write: if isUserSignedIn() && (isAdmin() || isEditor());
    }
  
    
    match /categories/{document=**} {
    	allow read : if true;
      allow write: if isUserSignedIn() && (isAdmin() || isEditor());
    }
    
    
    match /notifications/{document=**} {
    	allow read : if true;
      allow write: if isUserSignedIn() && isAdmin();
    }
    

    match /purchases/{document=**} {
    	allow read : if true;
      allow write: if isUserSignedIn();
    }
    
    
    match /user_stats/{document=**} {
    	allow read : if true;
      allow write: if isUserSignedIn();
    }
    
    
    match /purchase_stats/{document=**} {
    	allow read : if true;
      allow write: if isUserSignedIn();
    }
    
    match /settings/{document=**} {
    	allow read : if true;
      allow write: if isUserSignedIn() && isAdmin();
    }
    
    match /item_count/{document=**} {
    	allow read: if true;
      allow create, update: if isUserSignedIn() || isAdmin();
    }
    
    function isUserSignedIn (){
    	return request.auth != null;
    }
    
    function isAdmin (){
    	return "admin" in get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role;
    }
    
    function isEditor (){
    	return "editor" in get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role;
    }
    
    // New
    match /quiz_results/{document=**} {
    	allow read : if true;
      allow write: if isUserSignedIn();
    }
    
    // New
    match /quiz_comments/{document=**} {
    	allow read : if true;
      allow write : if isUserSignedIn();
    }
    
    
  }
}
```

{% endcode %}

* Click on the Publish button to publish the security rules. That's it.


# 3.3 Database Index Setup

From the Firestore Database, Click on the **Indexes** tab and click on the **Add Index**. You have to create **three indexes** for the database.

> * Enter **questions** as Collection ID, **quiz\_id** into the first field and set **Ascending**, Enter **created\_at** in the second field and set **Ascending,** Enter **\_\_name\_\_**  in the third field and set **Ascending** and then select **Collection** as query scope and save it.
> * Enter **quizes** as Collection ID, **live\_quiz.is\_live** into the first field and set **Ascending**, Enter **live\_quiz.start\_at** in the second field and set **Ascending,** Enter **\_\_name\_\_**  in the third field and set **Ascending** and then select **Collection** as query scope and save it.
> * Enter **quiz\_comments** as Collection ID, **quiz\_id** into the first field and set **Ascending**, Enter **created\_at** in the second field and set **Descending,** Enter **\_\_name\_\_**  in the third field and set **Descending** and then select **Collection** as query scope and save it.

This may take 3-5 minutes to activate. After completing this, your index page should look like this:

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FtNAl7unKZWLp2Y3YQmwC%2FScreenshot%202025-12-30%20at%202.53.57%E2%80%AFPM.png?alt=media&amp;token=7e9625af-8fba-41ba-a8af-482813b93564" alt=""><figcaption></figcaption></figure>


# 3.4 Push Notification Setup

* From your Firebase console, go to the **Project Settings > Service Accounts** Tab. You need to download your service account information. &#x20;
* **Firebase Admin SDK > Node.js > Generate new private key** and a JSON file will be downloaded.
* Open that JSON file in any text editor and copy the information inside the **{}** curly bracket.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FI8XKgJzGIsqtqLzgtvl3%2Fimage.png?alt=media&amp;token=605b6426-0fb9-4265-aed0-9bc76ff69a2a" alt=""><figcaption></figcaption></figure>

* Now go to your IDE and open **lib/configs/fcm\_config.dart** the file and paste the text you have just copied inside the curly bracket. That's it.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FmMiNfoCX5UwHvIabPlys%2Fimage.png?alt=media&amp;token=a1131a89-2267-4500-8d15-4bc73b91bf1e" alt=""><figcaption></figcaption></figure>


# 3.5 Firebase Storage Setup

* From your firebase console, go to **Build>Storage** and then Click on **Get Started**, and then select start in production mode and **Next>Done**.
* Now, go to the **Rules** tab and copy and paste the following code there.

{% code title="Storage Security Rules" %}

```firestore-security-rules
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read:  if true;
      allow write: if request.auth != null;
    }
  }
}
```

{% endcode %}

3\. Click on **Publish** to publish the rules.


# 4. Code Configs

From your IDE, go to the **lib/configs/config.dart** file.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FiHus1zZesrStDlG2OunA%2FScreenshot%202022-12-17%20at%2012.30.53%20PM.png?alt=media&amp;token=ab8459db-fc12-4256-9dbd-81cd03e80c1e" alt=""><figcaption></figcaption></figure>

> 1. Change the App Name.
> 2. To change the logo,  First, rename your logo to **logo.png** and make sure the icon is in .png format. Now drag & drop your logo to the **assets/images** folder and replace it with our logo. That's it.


# 5. Upload to Firebase Hosting

## Install the firebase-tools CLI <a href="#d31b" id="d31b"></a>

Skip this step if you already have firebase tools installed. If you do not have this, you must install that first.

> npm download link: <https://nodejs.org/> (Download and install it)

{% hint style="info" %}
If you are not sure whether `npm` is installed on your machine, run `$ npm -v` , and see if it lists a version number. If it does, then you already have `npm`. If it says “command not found”, you need to install it.
{% endhint %}

Once `npm` is installed, run the following command:

```
npm install -g firebase-tools
```

`firebase-tools` is now installed!

## Install the required command line tools <a href="#install-cli-tools" id="install-cli-tools"></a>

* Log into Firebase using your Google account by running the following command:

```
firebase login
```

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FKNevUECwJzG0l3e6SttC%2FScreenshot%202022-12-17%20at%201.06.41%20PM.png?alt=media&amp;token=79ae9960-815a-44ab-a717-49c5856764e5" alt=""><figcaption></figcaption></figure>

* Type Y and you will be redirected to your browser.

* Follow the command prompt and the link in your browser. Accept the permissions by clicking **Ok**. When you return to your terminal you should see that you are now logged in.

* Now you have to initialize the firebase. Run the following command:

```
firebase init
```

<figure><img src="https://lh5.googleusercontent.com/gmQTg_qE7UUhxmflNhNDI8UHT67Y6E16sIFUjH_gXWoNVUqODbCXBSE4v_YnBXlxu4AyZi20GfLVCVdLUahzASmKyUzPH2W9MMSQWlqAHduLDQ78GdAm3hpKEK7kjBVqfR5MNtgfzdGpa8XlM9uY0WZu5fHwXZ3wqbUXN_TttvZJoMr9jmpV37HfpS2M" alt=""><figcaption></figcaption></figure>

* Use the arrow keys to navigate the cursor to **Hosting** and hit the spacebar to select it, then press enter. Now you will see this screen:

<figure><img src="https://lh3.googleusercontent.com/PAlC0Ta4gYhgJ6EBOLkGnGbtiYgM5EwPfzZ7Pl-2FHZBsrB-pf-phgGz8QYx3pUVJT4CI8LzcXyQYD2pm0JXR3E_ai1r6q8Gzzpb6KnPSiVcgx66EkBmsCdzpQHjpUyBUR-KXBhJwrKstlmm63wNxDGKD9d3595NXeZNg3AsMbOTLjO27qa4ydDuIyRO" alt=""><figcaption></figcaption></figure>

* Select an existing project by pressing Enter. Use the arrow keys to select the project you have made in the firebase console.
* Next, enter **build/web** as the public directory and press enter, then enter **y** (for yes) to select the single page app option.
* Enter **n** (for no) to Set up automatic builds and deploys with the GitHub option.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FKUjsKYVdU9PLmSbloCaR%2FScreenshot%202022-12-17%20at%202.09.40%20PM.png?alt=media&amp;token=561f4e11-2f88-4bad-9080-74e690157ef7" alt=""><figcaption></figcaption></figure>

## Build The Web App

Run the following command to build the app for the web:

```
flutter build web --release
```

## Upload to Hosting

Run the following command to upload the admin app to the Firebase hosting:

```
firebase deploy
```

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2F2Gmmqy4w4J6dUK9046pF%2FScreenshot%202022-12-17%20at%202.14.10%20PM.png?alt=media&amp;token=baf28a92-31ac-49a1-b8d8-1bf1b6c29e32" alt=""><figcaption></figcaption></figure>

After this command, you will get a **Hosting URL** from Firebase which will be your **Admin URL**.


# 6. Admin Credentials Steup

Admin Username & Password Setup

1. From your Firebase Console > Your App, go to the **Build > Authentication > Sign-in method** tab and Enable **Email/Password** and Save it.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FYiULiy0DAcZ3nqwqs65L%2FScreenshot%202023-05-15%20at%2010.39.35%20PM.png?alt=media&amp;token=453784b2-b255-493b-afb4-393bf2f1fcea" alt=""><figcaption></figcaption></figure>

2. Now go to the **Users** tab and click on the **Add User** button and create a new account by providing your email and password.

{% hint style="info" %}
The username and password will be the admin email and password.
{% endhint %}

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FJ0Il2lb1peBJTPhDwMIH%2FScreenshot%202023-05-15%20at%2010.45.13%20PM.png?alt=media&amp;token=5626cad8-b653-447d-9fb5-aa395fb246d2" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2F00s6fbu18QHkEkRqS3Ie%2FScreenshot%202023-05-15%20at%2010.44.01%20PM.png?alt=media&amp;token=823bbc08-d834-464f-9b39-3be1880213d3" alt=""><figcaption></figcaption></figure>

3. Copy The **User UID** which is required for the next step. Now you have to create a record of the account you have created in the database.
4. Go to the **Build > Firestore Database** and create a collection named **users** by clicking on the **Start Collection** button.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FjjBxWlfRchoDjrJsxSI0%2FScreenshot%202023-05-15%20at%2011.01.09%20PM.png?alt=media&amp;token=0308cd96-5bd4-43a9-833e-7fdd5382f66d" alt=""><figcaption></figcaption></figure>

5. After clicking Next, you will get a new document form.
6. Use the **user Id** that you have copied as **Document ID**. Create a field named **id** and use the **user id** as value (same as Document ID). Create another field named **email** and use your admin **email** as value. Create another field named **name** and enter **your name** as value. Create another field named **created\_at** and the type must be **timestamp** and select **a date and time** as value. Create another filed named **role** and the type must be an **array** and write **admin** as the first value of that array.

{% hint style="info" %}
The fields and types should be exactly the same as shown in the picture below.
{% endhint %}

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2F1d8WDc6t0AV2cFHvHzI8%2FScreenshot%202023-05-15%20at%2011.15.00%20PM.png?alt=media&amp;token=1de99929-22b2-494f-b808-59bafabe3912" alt=""><figcaption></figcaption></figure>

7. Save it and after creating the user collection and document, your document details will look like this:

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FpZSefcAoZuiEHx65TLVp%2FScreenshot%202023-05-15%20at%2011.05.30%20PM.png?alt=media&amp;token=a9141b64-a123-4e68-8109-8ed794909bce" alt=""><figcaption></figcaption></figure>

That's it. Your admin account has been created. You can now login into your admin panel using the email and password you have created now.

{% hint style="info" %}
After, login into your admin account, if you see a validation form, just enter your purchase code and validate your account.
{% endhint %}


# 7. Conclusion

Hopefully, you have finished all of the steps and got an admin panel URL. You can add some content before going to the app setup.


# 1. Introduction

Make sure you have configured your admin panel first. If everything is okay, you can follow the further steps. You can use Android Studio or Visual Studio Code.

{% hint style="info" %}
Note: A Mac (Apple Desktop/laptop) device and an apple developer account are required for the iOS setup. If you don’t have both of them, you can ignore the iOS steps.
{% endhint %}


# 2. Code Setup

Open the **source/​quiz\_app** folder on your IDE (VSCode or Android Studio) and wait some moment to load the project.

> * Run the following command on the IDE terminal to clean the whole project first.
>
> ```
> flutter clean
> ```
>
> * Run the following command on the IDE terminal to get all the required packages.
>
> ```
> flutter pub get
> ```

\
Now, your project is ready for configuration.


# 3. Firebase Setup for Android


# 3.1 Android Package Name Setup on Firebase

* Go to the firebase console > Project overview page. Click on add app and then the A**ndroid** **Icon**. Enter your android package name.

<figure><img src="https://lh3.googleusercontent.com/8z0t-Z2lmTtkwEvhkIpmB7k5l1zGIGwbuALlduVOfhaio6JhgvoLJCrMhIoyE8WP_jviIf4CKtn3Pukh2bD8UOJS1hWJXSWg9PjhzGcn8QEXQVtvJ-rqEDZNcWxhMZGCbcqUmAijIIGErVmvnPSwlZcInngDOTg5A67RWI14v4TLm1i0sujUAFuN9oUp" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Your package name should be like com.your\_name.your\_app\_name . Like **com.microsoft.skype**. You can use the same package name for android & iOS. iOS doesn’t support under space in the package name. So, keep in mind that if you want to use the same package name for both android & iOS.
{% endhint %}

* Click on the register app and skip other steps by clicking next. That’s it.


# 3.2 Change Package Name Android

{% hint style="info" %}
Now, you have to change the package name in the source code. You have to use the same package name that you have registered in the firebase console.
{% endhint %}

* Go to your IDE and now you have to change the package name of your app. Run the following command from your IDE terminal by changing the package name with yours.

```
flutter pub run change_app_package_name:main com.new.package.name
```

{% hint style="info" %}
Don’t forget to replace **com.new\.package.name** with your package name.&#x20;
{% endhint %}

That’s it. Your android package name setup is complete.

<br>


# 3.3 Generate Debug Certificate

{% hint style="info" %}
You need to generate 2​ signing certificates​ for the google sign-in feature. Debug certificate is required for testing purposes. If you want to test google signing during development, then you should follow the steps. Otherwise, you can ignore it.
{% endhint %}

* To generate a debug certificate, run this command on your terminal from your app

  root directory.

{% tabs %}
{% tab title="Mac" %}

```
keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore
```

{% endtab %}

{% tab title="Windows" %}

```
keytool -list -v \
-alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
If this command doesn’t work, then go to this [link](https://developers.google.com/android/guides/client-auth) and copy the debug command from there according to your os.
{% endhint %}

* Use ​**android** as a debug password when the terminal asks for a password.

<figure><img src="https://lh6.googleusercontent.com/f8BzDO8crzYiwc2v7AfkKyJq1yFmoF6IwFblbkm89LrcKJWkRVuxxgxiTCrVyjxNQaffwhoaaXoPpNy5GBPIw869tiOZzlZ_lxfJezWD9D924HhKCEC8ET3-ahE8xRYJiQZsjUt2L1NC76p17zapQyRy-AP55MvHG-H5PRN_0zpn7RGGxlhVBnyN5-Zu" alt=""><figcaption></figcaption></figure>

* Copy the **SHA1** certificate code and go to **Firebase Console > Your Project > Project Settings** and click on the android icon and then add the **SHA1** code by clicking ​**add fingerprint​** button. Look at the picture below:

<figure><img src="https://lh3.googleusercontent.com/NiFFfBOiIGw_FxsQ_DDn57E3-Q9LvspXdAdpmred0Z1eXBM_1SFFDjIW-CUHEi7YnmQKoBf2JGi3LysoNoqZH9jh0iNIPOap0WZQULQvURTiOqx9gOyk-n2Nnm_H_pY6JnEj4uZVbl6GsLWtGquqEbB83w12csRd3u8hVdMliaV47CoyVAdCBZWG9rTZ" alt=""><figcaption></figcaption></figure>


# 3.4 Generate Release Certificate

To generate a release certificate, You have to generate a Keystore file. To generate a Keystore file, run this command below from the root of your project directory.

{% tabs %}
{% tab title="Mac" %}

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

{% endtab %}

{% tab title="WIndows" %}

```
keytool -genkey -v -keystore c:\Users\USER_NAME\upload-keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias upload
```

{% endtab %}
{% endtabs %}

* Enter your details and remember the **password**. After this, you will get an **upload-keystore.jks** Keystore file.
* Locate this file and move the file into the **android/app** folder and copy the **path** by right-clicking on the upload-keystore.jks file.
* Then go to the **android/key.properties**​ file and replace the **path** of your Keystore file. Then also replace the ​**password​** which you have inputted to generate the Keystore file.

<figure><img src="https://lh5.googleusercontent.com/tYMAq1QSqHV4Zm_e407IT-QBg90hWj--VlbKT72QKhJBGYx-4NRnkL-9AhPoOnSYC1WN_Fgw4Xek96zBjMcZfBg7vOUSJn12TTw8DK_SqJl_aRGscZPLatWP7pTWOuZMLbr30doWuf259fK2YYZGkUqDmXNMAXyR8m7zyZhjb2c93EvoFR8-ba_F6oQs" alt=""><figcaption></figcaption></figure>

Now you can generate a release certificate, To do that,

* Run with replacing your **alias\_name** and **keystore\_location**.

```
keytool -list -v -keystore keystore_location -alias alias_name
```

{% hint style="info" %}
Your alias\_name is **upload** and keystore\_location is the path(directory) of the **upload-keystore.jks** file.
{% endhint %}

* After that, you will get a **SHA1** code. Copy that code and add it to your **Firebase Console > Project Settings >  Android**, where you previously added a debug SHA1 code.

<figure><img src="https://lh3.googleusercontent.com/NiFFfBOiIGw_FxsQ_DDn57E3-Q9LvspXdAdpmred0Z1eXBM_1SFFDjIW-CUHEi7YnmQKoBf2JGi3LysoNoqZH9jh0iNIPOap0WZQULQvURTiOqx9gOyk-n2Nnm_H_pY6JnEj4uZVbl6GsLWtGquqEbB83w12csRd3u8hVdMliaV47CoyVAdCBZWG9rTZ" alt=""><figcaption></figcaption></figure>


# 3.5 Google Sign In Setup for Android

* Go to firebase console>your project>authentication>Sign-in-method and enable both **email/password** and **google** and save it.

<figure><img src="https://lh6.googleusercontent.com/YE-9nKU7rjZ90LM-ECsU2p-XA4T0VaerdDPC70Yudm9eC6eeHTAHCgK0F4IstxNk3Ll88BWTDY6wKz3yfKknfZUs0R2QW8PlKCrMcp8MzvlFQRtSBYLKKKQBGFSjVd7OCqWM6i4llFza7bV6kK7_hANcZU-bTlJLHFdRsosEcA3TlZDLR2X_g7UgT2GQ" alt=""><figcaption></figcaption></figure>

* You have to configure some stuff for google sign-in. Go to the Google Cloud Console.

{% hint style="info" %}
Google Cloud Console: <https://console.developers.google.com/apis/credentials/consent>
{% endhint %}

* Make sure you are signed in with the same account with which you have created the Firebase project.
* Also, make sure that on the top-left corner, your project is selected for which you are filling this consent.

<figure><img src="https://lh5.googleusercontent.com/dmlFFfgz83RMvnv2dpgrkyEiDjifB6AD1aHEwfj_JbqvZa3LffkGbwDTxra8P4x6AhGM_rLsKFrvVA_pjw_RMNU--TLgudFcKB7ASZgx1o6wolVcTRXOdGJwUKO-d-a7z6nHg6p2FYCQllbNaI6ctTsrCmIRYw9r_254Xn9DnGWjPXPcm9IGsoVT3zK5" alt=""><figcaption></figcaption></figure>

* Go to the Credentials → OAuth consent screen tab and start filling out the form.&#x20;
* Enter **Application name**, **Application logo** & **Support email**.

<figure><img src="https://lh6.googleusercontent.com/0Jdf1o9zCKuq-WNC8EO2e_QbCRXMtREZK_vkigxCPCe-tPqhUxuotdUOzxQSf9I-xGq2XfD5vOkH0YjA1kQh_kfo5Tu3Uc7doW5p_Xo0_x7kU8_Jh16kKtO8leZe4oTCky3WRwKQufi487JR7C4UxMVzqsFoGqv3Prld0jIShajZ-GvceQE2QKQPBb0t" alt=""><figcaption></figcaption></figure>

* In all these places, you have to enter the same link starting with **http\://** then your app domain name which I have marked with green below.
* Then, scroll down and fill in the Application Homepage link, Application Privacy Policy link, and Application Terms of Services link.

<figure><img src="https://lh6.googleusercontent.com/mbZw1n8YHB6J5-Gmap4uqkGvlqX0e8vNQ-Pr85fJmL96miJZCE-hKEtJwhGtIzHV3cwmuZiXyM63AeP75jAnisLNGG6hpQ8bIvo7StbINPG-FT6RvkRdcx5dOrSPLS1upuI1bEkdq9I34Xr2zaB-Rfcc2gcYjIoekrIoXkV45JkYvtke-j47z5ftJ5AK" alt=""><figcaption></figcaption></figure>

* Click on Save. That's it. You have completed your google sign-in & email setup.


# 3.6 Phone Number Login Setup

{% hint style="warning" %}
To use this feature, you need to upgrade to the Firebase Spark Plan and add a billing account, as per the recent Firebase update.
{% endhint %}

To use this, from your Firebase Console > Authentication > Turn on the **Phone** provider and add your testing number and OTP, which are required for texting purposes.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2Ff80wWxzkwfPc4l6yG8Lx%2Fimage.png?alt=media&amp;token=c1be5bce-10e8-4382-8e17-cb79dc80aade" alt=""><figcaption></figcaption></figure>


# 3.7 Additional Firebase Setup for Android

Now, you have to connect the firebase with your code project. Follow the steps below:

* Run the following command from your IDE terminal:

```
firebase login
```

{% hint style="info" %}
After this command, you will get a link prompt to log in with the email account that you have used on firebase. Login with that by allowing the required criteria.
{% endhint %}

* Run the following command from your IDE terminal:

```
dart pub global activate flutterfire_cli
```

{% hint style="info" %}
After this command, if you get an error like the picture below, then just copy that line and run that.

<img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2Fpbt5cZCueAoxrqjUF5yZ%2FScreenshot%202022-12-17%20at%201.10.51%20PM.png?alt=media&amp;token=d8f20b36-8b94-4156-b6c4-6291aa5a1a83" alt="" data-size="original">
{% endhint %}

* Run the following command from your IDE terminal:

```
flutterfire configure
```

* Select Your App and Press Enter.

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FMvbpYfBzfA3WryVtHA0H%2FScreenshot%202022-12-18%20at%201.23.03%20PM.png?alt=media&amp;token=23ce0d65-0d6d-42a4-b562-524608b332a1" alt=""><figcaption></figcaption></figure></div>

* Select Android and press Enter.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FeawRusTEoiQWcvB7vGpz%2FScreenshot%202022-12-18%20at%201.24.53%20PM.png?alt=media&amp;token=cdb8bcb6-3dd8-4216-8cbb-f60ff1d93f00" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Use arrow keys & space to select/unselect
{% endhint %}

{% hint style="success" %}
You can select both Android & iOS if you want to build for both. If you do that, you can ignore the **4.5** Step.
{% endhint %}

After this command, A **google-services.json** file in the android/app folder and A **firebase\_options.dart** file in the lib folder will be added. If you found them, your firebase configuration is successful.


# 4. Firebase Setup for iOS


# 4.1 iOS Package Name Setup on Firebase

* Go to the firebase console > Project overview page. Click on add app and then the **iOS icon**. Enter your package name. You can use the same package name that you have used for android.

<figure><img src="https://lh3.googleusercontent.com/2HkIc8mMM3dlkLdQk706dhSzBndlu2DSZI9bzN3cYwZWu53TX2EdWQqBNTRdlDWOHdH1fEj38jYE8Lw_rMaU_yoxkpqzg6j-BYQC4r57EEMtgl4KkFmBplSNbOGxoTWU4DgH0PzI_y9y7lqWrUUQXgt8vT7Cyf5vv5iHFEhvmYht5kVMe7O1cdPg8NiA" alt=""><figcaption></figcaption></figure>

* Click on the register app and skip others by clicking next.
* Now go to project settings and click on ios and download the **GoogleService-info.plist**​ file.
* Then go to the **i​os/Runner** directory​ and paste the file here.
* Now, Open the iOS folder on Xcode by right-clicking on the iOS folder from VSCode or Android Studio and go to the runner folder and move the **GoogleService-info.plist**​ file here. You will get a popup and click yes or confirm the popup message.
* Now, open the ​**GoogleService-info.plist**​ file from your IDE or from  Xcode and copy the **REVERSED\_CLIENT\_ID**. (See the picture below)​

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FPMBRzICfQO1hi0DtQzJM%2Fcode.png?alt=media&amp;token=fe1fe74d-b67d-4d91-a0aa-4eb1039335f3" alt=""><figcaption></figcaption></figure>

* Go to the **i​os/Runner/Info.plist​** file and replace the **R​EVERSED\_CLIENT\_ID** here.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FTPaljxJjMlB3Q9hBLrb6%2Fcode.png?alt=media&amp;token=94cc0cb7-47dd-4e66-8b06-3c3d768d5626" alt=""><figcaption></figcaption></figure>


# 4.2 Change Package Name iOS

* Go to the i​os/Runner/Info.plist​ file and replace the **CFBundleIdentifier value** with your **iOS package name**. (See the picture below)

<figure><img src="https://lh6.googleusercontent.com/D54CxI1Gk3mJqzDg-lgiCB96AnuUJQzJilTojtX-kcDy4vqiGwHUtHuYIDiW5giRwzRhglNXDv1H2fLpsmgKyePl07tywwChI19V6A-Xckhe-9Ku22nOSwx4P05TyZY188zLrHw4Vyp1XNwJWHyYwnNYarfJ2ZihB9i00uW7aURlTjlAN4brRfA0T9Oh" alt=""><figcaption></figcaption></figure>


# 4.3 Apple Login Setup

Only for iOS

{% hint style="info" %}
An paid apple developer account and Xcode app on your mac is required.
{% endhint %}

* From your IDE, Right click on the ios folder and click on open on Xcode and then go to runner > sign in & capability tab.

<figure><img src="https://lh5.googleusercontent.com/RvYYFr0Lj9AbDACK10oRt-qWMrggl99znz4ea2aJO1ezcZ4gHwYb0i1Zk96zBo2gMBPoTSmaFPHwgQYNNA4_KWq4D26bhjUwh4pup-iASQAkP_QoRop1EQQ-TYhsgjYTLRQJpjpR8yS0C4yplv_okxVAv5ygFqYG7pHZGThvpBssfH7mgw3qWmAT4jTA" alt=""><figcaption></figcaption></figure>

* Add Sign in with Apple. We already did this in the project. If this is not available in the project, do this by yourself.&#x20;
* Now go to your firebase console > your project > authentication page and enable the apple sign-in option. You don’t have to put anything in the text fields.

<figure><img src="https://lh4.googleusercontent.com/nB_mYeCZ39oVc2Vy49x9SrMxCC2SZM48EDcJ4rnk4wFvBoaKI8BaL0fVIDX-s0bLwPFZWriufAbBTPE6Dp8ZOXvSKFRg2-h0jv5xwcGV7Wv-QckCra6EbXt89SJZbjUDaWok8mUNC80O2bd5Z3jXQFVtmAx4H8KsJ-UujVopDjKmXw48rfo9zuMfaUch" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
One more thing, when you configure Firebase push notification for iOS in the next step, make sure you also tik on the Sign In with Apple option in the identifier on the apple developer page.
{% endhint %}


# 4.4 Additional Firebase Setup for iOS

Now, you have to connect the firebase with your code project. Follow the steps below:

* Run the following command from your IDE terminal:

```
firebase login
```

{% hint style="info" %}
After this command, you will get a link prompt to log in with the email account that you have used on firebase. Login with that by allowing the required criteria.
{% endhint %}

* Run the following command from your IDE terminal:

```
dart pub global activate flutterfire_cli
```

{% hint style="info" %}
After this command, if you get an error like the picture below, then just copy that line and run that.

<img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2Fpbt5cZCueAoxrqjUF5yZ%2FScreenshot%202022-12-17%20at%201.10.51%20PM.png?alt=media&amp;token=d8f20b36-8b94-4156-b6c4-6291aa5a1a83" alt="" data-size="original">
{% endhint %}

* Run the following command from your IDE terminal:

```
flutterfire configure
```

* Select Your App and Press Enter.

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FMvbpYfBzfA3WryVtHA0H%2FScreenshot%202022-12-18%20at%201.23.03%20PM.png?alt=media&amp;token=23ce0d65-0d6d-42a4-b562-524608b332a1" alt=""><figcaption></figcaption></figure></div>

* Select iOS and press Enter.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FvFQgJZzXPuDaAfw5Cta8%2FScreenshot%202022-12-18%20at%201.26.59%20PM.png?alt=media&amp;token=1f325550-640d-4b27-90e9-d4e48100dcd6" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Use arrow keys & space to select/unselect
{% endhint %}

After this command, Your iOS app information from firebase will be added in the **lib/firebase\_options.dart** file. If you found them, your firebase configuration is successful.


# 5. Push Notification Setup


# 5.1 Android Notification Setup

{% hint style="info" %}
For Android, You don’t have to do anything. We already integrated the procedures into the project.
{% endhint %}


# 5.2 iOS Notification Setup

{% hint style="info" %}
For iOS, Go to this [link](https://firebase.flutter.dev/docs/messaging/apple-integration) and follow the instructions. This is a well-written doc from Flutter Team. You can ignore the (Advanced, Optional) step from there.
{% endhint %}


# 6. Multi-Language Setup

{% hint style="success" %}
You can skip this setup for now. This is not a mandatory setup to run this app.
{% endhint %}

So, we have used 10 languages in this app. English, Spanish, Hindi, Bangla, Arabic, Portuguese, French, Chinese, Russian, and Indonesian.

{% hint style="info" %}
You can add as many languages as you want. The multi-language feature is only for all of the static texts in the app. It's static and not related to the database.
{% endhint %}

{% hint style="info" %}
English is the default & Starting Language. You can change the default language too if you want.
{% endhint %}

## Editing An Existing Language

If your language is already available on the list and you want to make some changes, then follow the steps below:

Example: If your want to change some text in the Hindi language, then open the **assets/translations/hi.json** file and edit only **right-side values**.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FPVKJRz2eWQaej8LYxP9B%2FScreenshot%202022-12-18%20at%2011.55.44%20AM.png?alt=media&amp;token=64159eb4-65bf-40fc-9f02-35494c798dc5" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Don't edit the keys (Left side values)
{% endhint %}

{% hint style="danger" %}
If you found any characters in the right-side values like this below, don't remove them.

<mark style="color:green;">**:, (), {}, -**</mark>
{% endhint %}

## Adding A New Language

If you want to add a new language that is not available in the default list, follow the steps below:

* First, go to the **assets/translations** folder from your IDE. Add a .json file here with **your\_language\_code.json** name. Now go to the **assets/translations/en.json** file and copy everything from this file and paste to **your\_language\_code.json** file.

<figure><img src="https://lh5.googleusercontent.com/PBY8hwflzFzUAEHObG2vsduBi4uKOgDngk_Bb076z3raTCLGWZqfJgSMMYcXR5XgSRPI_GFUjri-x8vzGRk9jsaj1ULyudyxyiV3PmfAdS8vKUxfIi6Xy7WfaC8gfW-98KGZcBVQ0Hlzkc2RKyFbHH1QSrtjJmbB8tBbj4UZgDJzDDdhJ9z6J4bMQpRn" alt=""><figcaption></figcaption></figure>

* Now, Rename the all right-side strings. Look at the es.json file and you will understand what to do.

{% hint style="warning" %}
Don't edit the keys (Left side values)
{% endhint %}

{% hint style="danger" %}
If you found any characters in the right-side values like this below, don't remove them.

<mark style="color:green;">**:, (), {}, -**</mark>
{% endhint %}

* Now, go to the **lib/configs/language\_config.dart** file and add your **Language Name** to the **languages** list and add your **Language code** to the **supportedLocals** list.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FgmTy5O96cAbA26Va5bHE%2FScreenshot%202022-12-18%20at%2012.09.35%20PM.png?alt=media&amp;token=69d20fc0-961b-4d07-bdae-948993c4837b" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Example: If you want to add the **German** language then add **'German'** and **Locale('de')**
{% endhint %}

{% hint style="info" %}
Language codes must be aligned with the language names. Their index number should be the same.
{% endhint %}

## Removing An Existing Language

To remove any language that is available in the list, please follow the steps below:

> * Go to the **lib/configs/language\_config.dart** file and remove the language name that you want to remove and remove the language code you want remove.
> * Go to the **assets/translations** and delete the language\_code.json file you want to remove.

## Start Locale Setup

English ('en') is added as the start language of the app by default. If you want to add any other language as a Start Language then go to the **lib/configs/language\_config.dart** file and replace the **startLocale** and the **fallbackLocale** with your language code. That's it.

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2Fp9iGLnCrD2EjTvOyedwn%2FScreenshot%202022-12-18%20at%2012.47.38%20PM.png?alt=media&amp;token=14a8bced-3d2d-44fe-845d-0808e86ab95a" alt=""><figcaption></figcaption></figure></div>


# 7. Ads Setup

{% hint style="success" %}
You can skip this setup for now and can configure it later. We have enabled AdMob ads by default with test ad unit ids. You can enable/disable ads from the admin panel.
{% endhint %}

We have added 3 types of AdMob ads.

> 1. **Banner Ads**: At the bottom of the quiz screen.
> 2. **Interstitial Ads**: End of quiz play. An interstitial ads will shown when a user complete an particular quiz.
> 3. **Rewarded Video Ads**: At the bottom the home tab and profile tab. User can earn points by watching video ads. How much points users can earch by watching each ads, you can sit that from the admin panel. Default is 20 points.

{% hint style="danger" %}
You can control ads from the admin panel. We have added an option to turn off/on ads at any time you want. Don’t enable ads on the admin panel if you are not enabled ads in the app.
{% endhint %}

{% hint style="warning" %}
We have used Admob ads by default with test unit ids. To test the ads, you should test with the test unit ids. Before releasing the app for production, make sure you have changed the app ids and ad unit ids with yours. Admob is applied by default. So you don’t have to do anything before releasing.
{% endhint %}


# 7.1 Admob Setup for Android

{% hint style="warning" %}
Follow these steps only for production (release):
{% endhint %}

* From your AdMob account, create an app for android. You will get an **app id** for android.
* Create 3 ad units. One banner, One Interstitial, and One Rewarded video.
* Now, go to the **android/app/src/main/AndroidManifest.xml** file and change the AdMob app id(Android) with yours.

<figure><img src="https://lh4.googleusercontent.com/cyIYSrQi2wyQF4RbDJbGUyVPKShtGCcek-rZwNCJ65pFa29_aq6wEnuneAlzMf__FISLqK4icehONb-K18L2bNZGDbdlpB8jEu2skt9bMvseuuJiq-ZGJO4boXljKk_oJQ-tuJCBlnrqk4wlqKKfw9tUYJuhnETdp-ShNigFuuqcDMN3w_TNMjlqFYHM" alt=""><figcaption></figcaption></figure>

* Go to the **lib/configs/ad\_config.dart** file and change the **appIdAndroid**, **interstitialAdUnitIdAndroid**, **rewardedVideoAdUnitIdAndroid** & **bannerAdUnitIdAndroid** with your values.

{% hint style="info" %}
Ignore the iOS ids if you don’t want to make the app for iOS.
{% endhint %}


# 7.2 Admob Setup for iOS

{% hint style="danger" %}
You shouldn't use the android values here.&#x20;
{% endhint %}

{% hint style="warning" %}
Follow these steps only for production (release):
{% endhint %}

* From your AdMob account, create an app for iOS. You will get an **app id** for iOS.
* Create 3 ad units. One banner, One Interstitial, and One Rewarded video.
* Now, go to the **ios/Runner/Info.plist** file and change the AdMob app(iOS) with yours.

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FGDdFfe3K0tPEKjgfrXQc%2FScreenshot%202022-12-18%20at%202.16.59%20AM.png?alt=media&amp;token=7be6dea1-b7eb-4ab5-9cfb-c929e4fbf290" alt=""><figcaption></figcaption></figure></div>

* Go to the **lib/configs/ad\_config.dart** file and change the **appIdiOS**, **interstitialAdUnitIdiOS**, **rewardedVideoAdUnitIdiOS** & **bannerAdUnitIdiOS** with your values.


# 8. App Information Setup

{% hint style="info" %}
Go to the **l​ib/config/app\_config.dart​** file and change the existing values with all of your details.
{% endhint %}

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2F2ENagAt2PpobbM7GwVGm%2FScreenshot%202022-12-18%20at%202.23.15%20AM.png?alt=media&amp;token=fcf480c2-7079-4dff-8864-c51746bfdd1a" alt=""><figcaption></figcaption></figure>

> * Chnage the app name
> * Support email
> * iOS app ID (Only for iOS and you can ignore this for now)
> * Other links

{% hint style="info" %}
iOS app id can be found from your Apple developer account > Appstore Connect > Your App > App Information page. (This is required to open your at the AppStore app to provide ratings)
{% endhint %}


# 9. Change App Name for Android

> Go to the **a​ndroid/app/src/main/AndroidManifest.xml​** file and Change your app name.

<figure><img src="https://lh6.googleusercontent.com/Z495Ld9DR0qIbjhqL6L3LA4tzKsPBtcsnAPlT1rkHnACoH3Q_CH2QnKf0vOploKZE50wJN3e2nq_61ArajngWzLMhqQWdwzVrWi7ZJrbwo4GtsrRnlpeP-mdJBRUqX9FDojMA8SGiZnFDcGqmaLN0oxO9sQ9zY4-P1NYARXc0RCUSncVQwNYB4HeSAyH" alt=""><figcaption></figcaption></figure>

<br>


# 10. Change App Name for iOS

> Go to the **i​os/Runner/Info.plist​** file and Change your app name.

<figure><img src="https://lh4.googleusercontent.com/vLdPlktLkv_FdgdMkIY9fXMjI5mfWmlD129XCWIWbfsFTFUsURLR5HcT6yqxyQk0QfMsGIO82FL7Kz1PE1TxQhZKuL-qgD6bqQnGMPCGYbr9ncy1qmT6Xx7quWoE5O818NMBVwGHMYxPQlQWE5FdsELBTllFQRqPOdSSYbSu5ZWwdKBtGsyyGSeGY5c4" alt=""><figcaption></figcaption></figure>

<br>


# 11. Change App Icon

> * Go to the **assets/images** and delete the default icon (i**con.png**).
> * Now upload your app icon as png in the **assets/images** folder and rename it to **icon.png**
> * Now run the following command on the terminal:

```
flutter pub get
flutter pub run flutter_launcher_icons:main
```

This command will create an android & iOS icons for your app.

{% hint style="info" %}
That’s it. For more info, visit this [site](https://pub.dev/packages/flutter_launcher_icons#-readme-tab-).
{% endhint %}


# 12. Change Splash Icon

To change the splash icon, you have to upload your own splash icon. The icon should be in the .png format and make sure you have renamed it to **splash.png**. Go to the **lib/assets/images** folder and drop the icon here and replace it with our icon. That’s it.


# 13. Change App Theme Color

Go to the **lib/configs/color\_config.dart** file and edit the appThemeColor & other colors. We have You can use any color and the changes will happen in the whole app.


# 14. Run The App

{% hint style="warning" %}
Before doing that, Please make sure that you have followed all of the previpus steps. Otherwise, it won't work.
{% endhint %}

{% hint style="info" %}
Before doing this, connect An Android Emulator from Android Studio or A Real Android device or An iOS Simulator from Xcode, or An real iOS device.
{% endhint %}

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

```
flutter clean
```

```
flutter pub get
```

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

```
flutter run
```


# 15. Releasing the Android App

at Google Play Store

{% hint style="info" %}
Make sure that you have done all the things that are required for the android release.
{% endhint %}

To test the released android app, run the following command on the terminal:

```
flutter build apk --split-per-abi
```

You will get 3 apk files from the **build/app/output/apk/release** folder. You can test the **app-armeabi-v7a-release.apk** file on your android device.

{% hint style="warning" %}
If you want to publish the app in the google play store, don’t upload any of the following apk files. Use an **appbundle** file which is recommended by Google
{% endhint %}

To generate an appbundle, run the following command on the terminal:

```
flutter build appbundle
```

After that, you will get a .aab file in the **build/app/output/appbundle/release** folder.

{% hint style="success" %}
Now you can upload this .aab file to the google play store.
{% endhint %}

<br>


# 16. Releasing the iOS App

at Apple AppStore

{% hint style="info" %}
Make sure that you have done all the things that are required for the ios release.
{% endhint %}

{% hint style="success" %}
Follow the official doc from the flutter team [here](https://flutter.dev/docs/deployment/ios).
{% endhint %}

<br>


# 17. Points Store Setup

In-App-Purchase (Sell Points to users)

This is a premium feature to sell points to your users. You can earn revenue from Google Play Store and Apple Appstore by selling points using the In-App-Purchase section. Users can purchase coins using Google Pay and Apple Pay.

{% hint style="info" %}
An extended license is required for this feature. You won't get some files with the regular license. If you have purchased the extended license, then just message us with your purchase code from here: <https://support.mrb-lab.com>. We will provide the required files to your email.
{% endhint %}


# 17.1 Android Setup

## Setup Payment Profile

From your **Google Developer Console Account > Setup > Payment Profile**, you need to add your payment profile. Like adding your bank account. If you have already added that, you can ignore it.

## License Testing Setup

In this step, you need to add some **testers** who can test the IAP product in the app and purchase points without any real payment.

**From your Google Developer Console Account > Setup > License testing**, Add some email addresses.

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FEcTD19SdhpB9izvzNwcN%2FScreenshot%202023-05-16%20at%203.20.46%20PM.png?alt=media&amp;token=bb916e20-9222-4cbc-92f6-f5608ee3dded" alt=""><figcaption></figcaption></figure></div>

## Upload Initial Build at Google Play Store

To activate IAP for your app in the Google Play Store, you need to add the **billing permission** in the code section and upload an initial build at the Google Play Store as **Close Testing**. (Only the testers you will assign in the upcoming step can test the app). You shouldn't upload it on production.

#### Add the Billing Permission

From the App source code, Go to the **quiz\_app/android/app/src/main/AndroidManifest.xml** file and **enable** the selected line shown in the picture below. This permission will enable the billing and IAP at the google play store.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2F85YVqCgkzvlcu3de0cze%2Fcode_1.png?alt=media&amp;token=b95e3cf8-b4b9-43b0-8c5a-f85080cdae6f" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you already uploaded your app in production and released it at the google play store, you also need to follow the same step (Add billing permission and upload it as a Close Testing version).
{% endhint %}

Without uploading any new version in the **Closed Testing**, you won't get the IAP features.

{% hint style="info" %}
Before going to the next steps, make sure you have uploaded a new build in the Closed Testing and published it.
{% endhint %}

## Configure In-App Purchases

After publishing a new version with Close testing, you will get an In-App purchases option on your app sidebar.

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FGupNBX0EsYmBxIBkKINS%2FScreenshot%202023-05-16%20at%203.34.18%20PM.png?alt=media&amp;token=561482d0-21e3-43b2-9f33-59ee3e3306a2" alt=""><figcaption></figcaption></figure></div>

#### Create IAP Products

From **Your App > Monetize >** **In-app products**, create an IAP product by clicking on the **Create product** button.&#x20;

Add **Product ID**.

{% hint style="info" %}
Product ID can be anything but unique. If you are using the IAP in **iOS** also, then make sure that both product IDs are the same.
{% endhint %}

Add **Product Name** which will be shown on the app. You should write how many points you want to sell here. Like **60 Points**. Add a Description of the product. This can be anything.

{% hint style="info" %}
Don't enter anything else in the Name. Just write how many points you want to sell (Like in the picture below)
{% endhint %}

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FIpA3ZY5qUfZwbCOML0wQ%2FScreenshot%202023-05-16%20at%203.38.24%20PM.png?alt=media&amp;token=543a8ab3-fc10-4385-a9d7-d29263c26098" alt=""><figcaption></figcaption></figure></div>

#### Pricing Setup

Set your price and Click on **Apply Changes**.

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FQlTQeDy9RGObCZsVwjRy%2FScreenshot%202023-05-16%20at%203.50.46%20PM.png?alt=media&amp;token=a88b4b68-a6b0-4cac-a8b3-125c768cd507" alt=""><figcaption></figcaption></figure></div>

Save the product. That's it.

{% hint style="info" %}
You can create as many IAP products as you want in this way.
{% endhint %}


# 17.2 iOS Setup

## Sign A Paid Application Agreement

The first and foremost thing you have to do is to accept the agreement. Go to **app store connect -> Agreements, Tax, and Banking**. You will see two agreements. One for Free Apps and the second for Paid Apps.

Free apps agreement doesn’t require you to add your bank account and fill in the Tax information, but Paid Apps do require. You need to accept the Paid Apps agreement. Once you accepted the agreement and filled in the necessary information, your status of agreements will be active. Just like this 👇🏻👇🏻👇🏻

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FU3ZFOC6JQzHQ1slytjIO%2Fimage.png?alt=media&amp;token=b3ae85b4-87aa-4379-95fd-4ff69fc4c08d" alt=""><figcaption></figcaption></figure></div>

## Configure In-App Purchase in App Store Connect

From your Appstore Connect, go to Your App > **In-App Purchases**. Now, your need to create the products which you want to sell. We are selling consumable points in our app which users can purchase multiple times.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FgD2Zk0mfvyqAIeMEcFpE%2FScreenshot%202023-05-16%20at%201.57.25%20PM.png?alt=media&amp;token=bdf0f740-090b-45a1-acff-43830afb0cae" alt=""><figcaption></figcaption></figure>

#### Create IAP Products

Create A IAP Product by clicking on the (+) button. Select **Consumable** as Type, Add a reference name, and add your product name.

{% hint style="info" %}
Reference names can be anything you want to use. Reference names won't be visible in the app.
{% endhint %}

{% hint style="info" %}
Product ID can be anything but unique. If you are using the IAP in **Android** also, then make sure that both product IDs are the same.
{% endhint %}

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2F9oc0a54KvLJP76ml0Jno%2FScreenshot%202023-05-16%20at%202.03.23%20PM.png?alt=media&amp;token=f2468446-9d9a-4079-b75a-e1009b599bac" alt=""><figcaption></figcaption></figure></div>

#### Setup Availability

Set up the availability of your IAP Product. You can select all of the countries if you want to sell the products to all.

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FSv5w0lxs4FvkiW7izVJ5%2FScreenshot%202023-05-16%20at%202.28.22%20PM.png?alt=media&amp;token=79fa7f8b-a45a-420d-b02f-eb0ec76d74cc" alt=""><figcaption></figcaption></figure></div>

#### Pricing Setup

Select the price of the product. You should select the **United States (USD)** as the Base country. Complete the pricing setup by clicking next...Done.

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FhaPyERo0XsP0LWFc9ZDO%2FScreenshot%202023-05-16%20at%202.31.12%20PM.png?alt=media&amp;token=21308d3c-7595-4abe-8b38-facd74b01824" alt=""><figcaption></figcaption></figure></div>

#### Setup AppStore Localization

Click on the **Add Localization**. **Add Display Name** which will be shown on the app. You should write how many points you want to sell here. Like **60 Points**. Add a Description of the product. This can be anything.

{% hint style="info" %}
You should select English (US) as Localization. Don't enter anything else in the Display name. Just write how many points you want to sell (Like in the picture below)
{% endhint %}

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FvV8L9ATLMv3aKCTCpJWD%2FScreenshot%202023-05-16%20at%202.37.41%20PM.png?alt=media&amp;token=5791a3cd-418d-40c9-a869-e50de181ef1b" alt=""><figcaption></figcaption></figure></div>

Save the product. That's it.

{% hint style="info" %}
You can create as many products as you want in this way.
{% endhint %}

#### Add the In-App Purchase Feature in Xcode

From the app source code open the **quiz\_app/ios** folder in your **Xcode** App. Now go to the **Runner > Signing & Capabilities** and click on the **+ Capability** and add the **In-App Purchase** option. That's it.

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2Flv8kEpXx5XBF3RWYeV3K%2FScreenshot%202023-05-20%20at%202.36.38%20PM.png?alt=media&amp;token=64675851-d39c-41d5-bb0e-c34a4a6f57be" alt=""><figcaption></figcaption></figure></div>


# 17.3 Code Setup for IAP

{% hint style="info" %}
Make sure you have completed all of the previous steps of 17, 17.1 & 17.2.
{% endhint %}

You will get an **iap.zip** file from us in your email after contacting us with your purchase code. Unzip it and you will get a folder named **IAP**. Copy this folder and paste this folder into the **quiz\_app/lib** folder.

Open the app source code in your IDE and open the **lib/IAP/iap\_config.dart** file.

Now add your IAP **Product IDs** here separated with commas as shown in the picture below.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FVJoUi1xdfb7cpo3EfBVq%2Fiap_config.png?alt=media&amp;token=ab13fddc-f17d-4e6c-8543-88c88e960574" alt=""><figcaption></figcaption></figure>

Now go to the **lib/tabs/home\_tab.dart** file and enable the selected disabled lines shown in the picture below.

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FxrP5YqvqDvtis5x35vew%2Fiap_code.png?alt=media&amp;token=05be852d-58e3-4719-b320-0985ed85e5cc" alt=""><figcaption></figcaption></figure></div>

That's it. Your IAP setup is completed. Now, you can test the app and the IAP products and publish your app in production by uploading a new version.

{% hint style="info" %}
To test the In-App Purchases feature, use a real Android or iOS phone. Emulator/Simulator doesn't support this.
{% endhint %}


# 1. Customize Intro/On-Boarding Screen

## Change Intro Images

To change the Intro images, you have to use your own images. These images must be in .svg format. We have used images from the following site: [https://storyset.com/](https://storyset.com/?fbclid=iwar0xg3xecpfvfv_lqopgfic7c6-cdkh7mgdd4ylcxwfkyn4alordhk84hso). You can get the images from there too.

* Select your 3 images and rename them to **inro\_1.svg, intro\_2.svg** and **intro\_3.svg**.
* Go to the **assets/images** folder and paste and replace with the existing images.

## Change Intro Background Colors

Go to the **lib/configs/app\_config.dart** file and change the selected colors.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FOkv1O5YQ6e5v6IqUM5PK%2Fcode.png?alt=media&amp;token=0d8f4f99-c53f-46e4-a846-1d54d1ab3c84" alt=""><figcaption></figcaption></figure>


# 2. Disable Specific Features

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FtK7spg13wD7jz6wUbnl8%2Fall_edit.png?alt=media&amp;token=5b2a1470-d603-402a-b949-c6f183cf64ab" alt=""><figcaption></figcaption></figure></div>

> You can disable/enable some specific features of the app from this file. File Location: **quiz\_app/lib/configs/feature\_config.dart**

### Disable Facebook Login

As per the new policy from Meta, A registered organization/company is required to enable Facebook login in the app or website. If you are an individual and having issues with fb login steps, then you can easily disable fb login from the app. To do that,

Change the **fbLoginEnabled** value to **false**. That's it.

<div align="left"><figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2FFZpjjreGAdVNvl46rnB6%2Ffb.png?alt=media&amp;token=870aeb19-2edb-4fac-95e0-810ad1d8581a" alt=""><figcaption></figcaption></figure></div>

### Disable Multi-Language Feature

If you want to use the app language only in English and remove the language selection dialog from the app, then you can disable that easily. To do that,

Change the **MultiLanguageEnabled** value to **false**. That's it.

<figure><img src="https://3767936052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fcv8FlmekAQLXUn7f8PbK%2Fuploads%2F5MiEOfY1AVVERl1vzulT%2Fln.png?alt=media&amp;token=cba6d517-2813-4825-8c7a-26a4a41404b9" alt=""><figcaption></figcaption></figure>

### Disable Bookmark Questions For Users

If you want to disable the Bookmark question feature for your users, then just change the **bookmarkQuestionsEnable** value to **false**. That's it.

{% hint style="info" %}
In this way, You can disable/enable the other available features on the page.
{% endhint %}


# 3. Import Questions (Bulk Upload)

In **v2.1.0**, we have added an option to import questions. In this way, you can upload unlimited questions in one click. Only CSV files are supported. You should use our demo template as you should follow some guidelines for that.

Demo CSV template: [<mark style="color:purple;">Click here</mark>](https://docs.google.com/spreadsheets/d/1Q96uvXeYrGnjWIY5uL7OOgY7HCRHVlFbhowhjpDND-A/edit?usp=sharing)

### Guidelines

1. **Question:** Your Question Title.
2. **Options:** you should use the separator sign (**|**) to separate the options. Like, If your question has four options then you should insert: Black|White|Yellow|Green

{% hint style="info" %}
Make sure there is **no space before and after the separator sign**.
{% endhint %}

2. **Correct Answer Index:** You should enter only numbers and the count starts from zero. So, if the first option is the answer then the correct answer index will be 0, and so on.
3. **Question Type:** There are 5 question types and these are:

> * **text\_only**: Only for text questions
> * **text\_with\_image**: Text with an image
> * **text\_with\_audio**: Text with audio URL
> * **text\_with\_video**: Text with Video URL
> * **fill\_blanks**: Fill in the blanks (Text with a blank space)

You need to use any type from them. Any other values are not acceptable.

4. **Option Type:** There are 3 option types and these are:

> * **text\_only**: Only for text with 4 options
> * **t/f**: Only True and False. First value should be True and second value should be False.
> * **image**: Image options with 4 options

You need to use any type from them. Any other values are not acceptable.

5. **Question Image URL:** Question Image URL if you are using **text\_with\_image** question type.
6. **Question Audio URL:** Question Audio URL if you are using **text\_with\_audio** question type.
7. **Question Video URL:** Question Audio URL if you are using **text\_with\_video** question type.
8. **Explanation:** Question explanation. This is optional. If you don't want to use it then don't write anything.

###


# Migrate to the v2.0.0(hotfix-1)

## 1. Download the New Source Code

Download the new source code. You need to use the new source code to apply the updates.

### 1.1 Admin Update

Copy the changed files from the new source code and replace them with your old source code.

Changed files:

> * quiz\_admin/lib/forms/quiz\_form.dart
> * quiz\_admin/lib/forms/question\_form.dart

### 1.2 App Update

Copy the changed files from the new source code and replace them with your old source code.&#x20;

Changed files:

> * quiz\_app/lib/pages/quiz\_screen.dart


# Migrate to the v2.0.0

## 2. Download the New Source Code

Download the new source code. You need to use the new source code to apply the updates.

### 2.1 Admin Update

Make sure you are using the Flutter latest version 3.10.x. Older versions won't work with the latest code. From the **Admin Setup**, follow the steps below:

> * 3 (In this step, don't create any new firebase project. Just use your old project configs)
> * 3.2 (Update your security rules)
> * 3.3, 3.4(Use your old Server Token)
> * 4, 5

### 2.2 App Update

Make sure you are using the Flutter latest version 3.10.x. Older versions won't work with the latest code. From the **App Setup**, follow the steps below:

> * &#x20;2, 3.1, 3.2, 3.6 (Use your old keys)
> * 3.7, 4.1, 4.2, 4.3, 4.5, 6, 7.1, 7.2, 8, 9, 10
> * 11, 12, 13, 14
> * 17 (If you have purchased an extended licence)