QuizLab
Complete Quiz Solution with Flutter App and Admin Panel
  • Created : 2023-11-04
  • By : ViserLab

Welcome to Quiz Lab, your ultimate destination for quiz and trivia challenges, available for both Android and iOS devices. This app has been created to test your knowledge and provide you with an entertaining learning experience.

We are dedicated to enhancing the Quiz Lab app by regularly adding new quizzes, features, and ensuring security to provide the best quiz experience for our users. We value your feedback and strive to make your quiz journey as enjoyable as possible.

Thank you for choosing Quiz Lab. If you have any questions or suggestions that you'd like to share with us, please feel free to contact us via email. We are committed to promptly addressing your inquiries. We appreciate your support and hope you enjoy our quiz app.

Requirements
Follow the below requirements.
  • Download and install Any one from these IDE(Android studio, Vs Code)
  • Flutter and Dart must be successfully installed and setup on your device in order to edit this project.(Recommended Flutter SDK version: 3.13.6)
  • Install the Flutter and Dart plugins after setting up your editor
Installation
Follow the below instruction to install the system.
  • Unzip the downloaded project and open the project to the preferred IDE (Android Studio / Visual Code)
  • Then complete the main configuration section
  • On IDE go to the pubspecs.yaml file then clicks on the Pub Get button top of the IDE to install the libraries.
  • To run the project, connect an emulator or a real device.
  • Then press the Run button to run the project on the connected device
Folder Structure
Folders and files structure are showing below
Screens
Our app screens list are showing below
  • Splash Screen
  • Onboard Screen
  • Login and Registration Screen
  • Forget Password and Reset Password Screen
  • Email, Sms Screen
  • Smart Homepage
  • Quiz Category Screen
  • Quiz Section Screen
  • General Quiz Section Screen
  • Fun and Learn Screen
  • Guess The Word Screen
  • Daily Quiz Screen
  • Live Exam Screen
  • Contest exam Screen
  • LeaderBoard Screen
  • Coin Store Screen
  • Coin History Screen
  • Menu Screen
  • Multi Language System
  • FAQ Screen
  • Profile Screen
  • Change Password Screen
  • And more...
Main Configuration
Application Setup
1. Flutter Setup

Follow the guidelines in the following link to install the Flutter environment

OFFICIAL DOC LINK: https://docs.flutter.dev/get-started/install

2. Firebase Setup
  • Create a New Firebase Project:
    • Once you are logged in, click on the "Add Project" button
    • Provide a name for your Firebase project. This name is for your reference and can be anything you like.
    • Choose or Create a Google Analytics Account:

      If you enabled Google Analytics, you'll need to choose an existing Google Analytics account or create a new one.

    • Click on 'Create Project.'
    • Wait for Project Creation:

      Firebase will take a moment to create your project. Once it's done, you'll be redirected to the project dashboard.

    • Click on 'Continue'
    • Add Your Desired App for Android or iOS
  • Android Firebase Setup
    • After Clicking Android Icon
    • Fillup Recommended Options

    • Download google-services.json
    • Clck Continue To console
  • IOS Firebase Setup
    • After Clicking IOS Icon
    • Fillup Recommended Options

    • Download GoogleServices-Info.plist
    • Clck Continue To console
  • Google Auth Setup
    • After Clicking All Products


    • Click on Authentication


    • Click on Get Started


    • Click on Add New Provider


    • Click on Google


    • Enable And Slected an Email and click on Save Button
    • Below, you will see the "Download Configuration" option. We assume you have already downloaded it in the Firebase setup section.


    • Now Click On Add New Provider Button


    • Now Click On Phone


    • Enable And Add a Test Phone (Optional) and click on Save Button
    • Auth Setup Done
    • Now You Need To Setup Keystore and SHA-1 KEY
  • Cloud FireStore Setup
    • After Clicking All Products

    • Click On Cloud Firestore


    • Click on Create Database
    • Select Production Mode Or Test Mode and CLick Next
    • Select Server location and CLick Enable

    • Wait few second

    • Click On Rules

    • Change Rules To Bellow Code and CLick Publish Button
    • Rules Code
    • Cloud FireStore Setup Done

  • Cloud Cloud Messaging Setup
    • After Clicking All Products

    • Click On Cloud Messaging

    • Click Create Your First Campaign

    • Select Firebase Notification Messages
    • Cloud Messaging Setup Done Now you can send Notification from here or you need to setup Firebase Server key to admin panel
  • Cloud Cloud Messaging Server Key Setup
    • After Clicking On Settings Icon Click On Cloud Messaging

    • If Disable then click on 3 dot
    • Click Enable Button

    • Also You can Disable It

    • Then, go back to the previous Firebase settings page, and you will find the "Enabled" mark.

    • Click to Add Server Key
    • Done Now you can Copy Firebase Server Key And use it in Admin Panel




  • 2. App Key Store Setup

    To generate a keystore in Android Studio, follow these steps:

    1. Open your app code project in Android Studio.
    2. Click On Tools > Flutter > Open Android Module in Android Studio
    3. Now Wait For app Gradle Update
    4. Click on the Build menu and select Generate Signed Bundle/APK.
    5. In the Generate Signed Bundle or APK dialog, select Android App Bundle or APK and click Next.
    6. Below the field for Key store path, click Create new.
    7. Click NEXT Button:
    8. On the New Key Store window, provide the following information for your keystore and key, as shown in the image below:
      • Key store path: Select the location where your keystore should be created. Also, a file name should be added to the end of the location path with the .jks extension.
      • Password: Create and confirm a secure password for your keystore.
      • Alias: Enter a name for your key.
      • Password: Create and confirm a secure password for your key.

        Click Create New

        Click OK

        Fillup all field

        Click NEXT

        You Will get a Release App bundle

    9. Click OK to create the keystore and key.

    Once you have created a keystore, you can use it to sign your Android apps for release.

    Additional notes:

    • Choose a strong password for your keystore and key.
    • Store your keystore in a safe place.
    • Back up your keystore regularly.
    • If you lose your keystore, you will not be able to update your app on the Google Play Store.

    Conclusion

    Generating a keystore is an important step in preparing your Android app for release. By following the steps above, you can create a keystore and key that will help to protect your app and your users.

    Setup
    Application Setup
    1. Change App Name

    • For Android
      • Open AndroidMainfest.xml to IDE from android/app/src/main
      • Change the label name inside the application tag from this file
    • For IOS
      • Open Info.plist file to IDE from ios/Runner
      • Change the app name inside the dict. Please follow the below instruction.

    3. API Base URL
    • Open lib/core/utils/url_container.dart file and change base url string
    4. Change App Color
    • Open lib/core/utils/my_color.dart folder and Replace the value in the primary Color field with the prepared color code. From here, you can easily change the color of something else.
    5. Change Package Name
    • Right click on project folder and click on Replace in Files

    • Search dev.vlab.quizlab in the first indicated box and your own package name in the second marked box. Then click Replace All button
    6. Change Admob APPLICATION_ID
  • For Android
    • Open AndroidMainfest.xml to IDE from android/app/src/main
    • Change the APPLICATION_ID VALUE inside the application tag from this file
  • 7. Add Firebase Option config
  • lib/firebase_options.dart
    • Open firebase_options.dart to IDE from lib/firebase_options.dart
    • Change all the values inside this file. You will find all the key codes in the Firebase settings section.
  • OR

    • Setup Using Firbase Cli For Flutter
    • 1. Android

      Follow the guidelines in the following link to Setup Firebase in you app using Firebase CLI.

      OFFICIAL DOC: https://firebase.flutter.dev/docs/cli/

    8. Generate SHA-1 & SHA256 KEY
  • Open a Terminal:
    • Open a terminal or command prompt in your project's root directory where the gradlew script is located.

      CMD: cd android

      Run the Gradle Signing Report Task:
      In the terminal, run the following command:
      Generate key code
    • CMD: ./gradlew signingReport

    • To Generate Release SHA-1 KEY add keystore.properties in you app


    • Create the key.properties File:
      First, create a new file named key.properties in the android directory of your Flutter project.

    • Edit key.properties File
      Open the key.properties file in a text editor, and add the necessary configuration properties. A common use case for this file is to store the signing configuration for your Android app. Here's an example of what the key.properties file might look like for


    • storeFile=/path/to/your/keystore.jks
      storePassword=your_keystore_password
      keyAlias=your_key_alias
      keyPassword=your_key_password

      Demo
  • Now Put This Key in Firebase App

    • Setup Using Firbase Cli For Flutter
    • Fingerprint SHA-1 and SHA-256 key add here
    Publish App
    Follow below instruction to publish the app
    1. Android

    Follow the guidelines in the following link to publish the app to Play Store.

    PlayStore: https://flutter.dev/docs/deployment/android

    2. IOS

    Follow the guidelines in the following link to publish the app to AppStore.

    AppStore: https://flutter.dev/docs/deployment/ios

    Support
    Support information details

    Once again, thank you so much for purchasing this App. As I said at the beginning, I'd be glad to help you if you have any questions relating to this App. No guarantees, but I'll do my best to assist. If you have any queries, please feel free to contact us at Support Center.

    Email Us: https://viserlab.com/support