Introduction to Quiz App


Eye-catching design and sleek aesthetic makes Mighty Quiz App the most promising tool to launch your quiz app. You can now kick things off like a professional. No need to set up a mobile app from the ground up, you can now speed up the process with Mighty Quiz App. It includes two user-roles/modules - Mighty Quiz User and Mighty Quiz Admin. With a unique leader board design, dashboard, multi-quiz levels, category range for users to select, Mighty Quiz App comes in both light and dark mode. The App has a clean, modern and user-friendly layout, making sure the performance is always of the highest level for it’s users. So, do not wait any longer to unlock your creative freedom – without coding only with Mighty Quiz App.

Prerequisite

Android Studio: 4.1.2

Flutter: 2.0.0

Must Follow this

  • Danger
  • To set up the Firebase app, you must first add the Google JSON file by following the steps below, or else the app will not work.

    Setup Firebase

  • For Firebase setup, you just need to change the android/app/google-services.json file.
  • Create a new firebase account, register your application with your package name.
  • Now download the google-services.json file and replace with current.
  • Refer to Link
1 OneSignal App ID
  • Configure OneSignal detail click here
  • Add OneSignal key inside lib/utils/Constants.dart mOneSignalAPPKey variable
  • How to Make admin


    Step 1 : Register yourself using your email address and a password from the user app.

    • Danger
    • To gain admin access, you must first register with your email address. Google Sign will not function.

    Step 2 : After successfully creating the user, navigate to the firebase console and locate your document in the user collection. Change the value of isAdmin to true in that document.

    • Info
    • If you want to create a user for testing purposes, set the isTester property to true in that user document.
    logo

    Step 3 : Now, open the admin panel and sign in with your admin credentials.

    How to Create Indexes


    Step 1 : Navigate to the Firebase Console and then to Indexes.

    Step 2 : This type of error will appear when you open quizhistory to the user application.

    logo

    Step 3 : Copy and paste this link into your browser to get this type of dialogue, then click on Create Indexes.


    logo
    • Info
    • Be patient, the indexes will take some time to build.
    logo

    Step 4 : Create all indexes in this manner.

    • Info
    • Total 6 Indexes will be created.

    Create Indexes mannually

    Step 1 : Click on the Add Index button, and then enter the collection id.

    logo

    Step 2 : Create all of the indexes listed below and wait for them to be built.

    logo

    How to upload images?


    • Info
    • Firebase Storage has some limitations when it comes to uploading/retrieving images. So, another option for uploading images is to use Google Drive.

    Step 1 : Upload your images to Google Drive and then generate the image URL.

    Step 2 : Then copy and paste it into the upload news section.

    Project Structure & Features

    Quiz App project structure and short description for each of them is as follow:

    • assets: apps/widgets/snippets images as well as appIcon are stored here.
    • lib: Application main file and folder are located here.
      • component: All the Widgets except for screen will be declared here.
      • models: A base class that holds some data and allows other classes to listen to changes to that data.
      • network: All API configurations are located here.
      • screens: FileName contents Screen at the end of name eg. DashboardScreen.
      • store: It is used for State management technique MOBX.
      • utils: Basic ready made widgets are located here.
        • Colors.dart: Application colors are declared here.
        • Common.dart: Commmon functions are declared here.
        • Constant.dart: All the constant values are declared here.
    • pubspec.yaml: Application name and other project dependencies can be found here.

    User App Features

    • DashBoard
    • Self Chalenges
    • Quiz Level
    • Daily Quiz
    • Category functionality
    • SubCategory Wise Quiz functionality
    • OneSignal push notification
    • User profile
    • Google ,Email & Apple SignIn
    • Dark mode
    • Multi Language Support

    Admin Panel Features

    • DashBoard
    • Email SignIn
    • Category functionality
    • SubCategory functionality
    • Create Question with Image
    • Daily Quiz
    • OneSignal push notification
    • System Configuration
    • Multi Language Support
    • Filter Question

    Upcoming Features

    • Google & OTP SignIn
    • Contestes
    • Import Question
    • Quiz Level

    Introduction to Flutter


    Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for MOBILE, WEB, and DESKTOP from a single codebase. It is very easy to learn and currently it is getting more and more popular. With this blog post, you will learn some basic stuff about Flutter and after reading it, you will be able to create a simple application using this technology.

    Click here to check out more details about flutter.

    Tools & Setup


    Prerequisite

    • Flutter & Dart SDK
    • Anyone IDE Android Studio (Recommended), Visual Studio Code or IntelliJ IDEA
    • To edit this project you must have Flutter and Dart installed and configured successfully on your computer.
    • Set up your editor - Install the Flutter and Dart plugins.
    • If you have got Android SDK installed and configured, to install Flutter you only need to:
      • Download Flutter SDK from official website and extract it.
      • Add path to previously extracted SDK to your PATH variable
      • Run flutter doctor tool to check if everything is configured correctly.
      • All above steps are mentioned here: https://flutter.dev/docs/get-started/install/

    Android Studio – Windows​


    Step 1 : Get the Flutter SDK

    1 Download the following installation bundle to get the latest stable release of the Flutter SDK:

    2 Extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (for example, C:\src\flutter; do not install Flutter in a directory like C:\Program Files\ that requires elevated privileges).

    Step 2 : Update your path

    If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable: From the Start search bar, enter ‘env’ and select Edit environment variables for your account. Under User variables check if there is an entry called Path:


    Important

    Note that you have to close and reopen any existing console windows for these changes to take effect.

    You are now ready to run Flutter commands in the Flutter Console!

    Step 3 : Run flutter doctor

    From a console window that has the Flutter directory in the path (see above), run the following command to see if there are any platform dependencies you need to complete the setup:

    c:\src\flutter>flutter doctor

    If you find any issue during environment setup, please go online Click here

    Android Studio – macOS​



    Step 1 : Get the Flutter SDK


    Step 2 : Update your path

    Important

    Path variable needs to be updated to access “flutter” command from terminal. you can just update path variable for current terminal window only. and if you want to access flutter commands from anywhere in terminal, we need to update SDK path permanently.

    To update PATH variable, we need to open terminal.

    To update PATH variable for current terminal window only, then enter this command "export PATH="$PATH:`pwd`/flutter/bin"" and hit enter key.

    To update PATH variable permanently, then Open or create .bash_profile file. to open or create that file, then enter "sudo open -e $HOME/.bash_profile" and hit enter key.

    Append below line to bash_profile file at bottom of all other content. "export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"" as [PATH_TO_FLUTTER_GIT_DIRECTORY] is actual path of SDK folder.

    Run this command on terminal "source $HOME/.bash_profile" to refresh PATH variables.

    Then check whether our SDK is successfully installed or not.

    You are now ready to run Flutter commands in the Flutter Console!

    Run "flutter doctor" into terminal, If you are getting check list of flutter sdk requirements, it means SDK is successfully installed on your machine. and you can start building flutter apps on your machine.

    If you find any issue during environment setup in macos, please go online Click here

    Android Studio – Linux​​


    Step 1 : Get the Flutter SDK

    Step 2 : Update your path

    Important

    Path variable needs to be updated to access “flutter” command from terminal. you can just update path variable for current terminal window only. and if you want to access flutter commands from anywhere in terminal, we need to update SDK path permanently.

    You’ll probably want to update this variable permanently, so you can run flutter commands in any terminal session. To update PATH variable, we need to open terminal.

    export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"

    1. Run source $HOME/. to refresh the current window, or open a new terminal window to automatically source the file.
    2. Verify that the flutter/bin directory is now in your PATH by running:

    echo $PATH

    Verify that the flutter command is available by running:

    which flutter

    You are now ready to run Flutter commands in the Flutter Console!

    Getting Started (Build & Run)

    Important

    All below steps are must be followed to build and run application

    Download Project

    Download and find the your project folder, use your preferred IDE (Android Studio / Visual Studio Code / IntelliJ IDEA) to run the project.

    logo

    Get Dependencies

    After you loaded project successfully, run the following command in the terminal to install all the dependencies listed in the pubspec.yaml file in the project's root directory or just click on Pub get in pubspec.yaml file if you don't want to use command.

    flutter pub get

    Important

    All below steps are must be followed to build and run application

    logo

    Build and Run App

    1. Locate the main Android Studio toolbar.
    2. In the target selector, select an Android device for running the app. If none are listed as available, select Tools > Android > AVD Manager and create one there. For details, see Managing AVDs.
    3. Click the run icon in the toolbar, or invoke the menu item Run > Run.
    logo

    After the app build completes, you’ll see the app on your device.

    If you don’t use Android Studio or IntelliJ you can use the command line to run your application using the following command

    Important

    Below step requires flutter path to be set in your Environment variables. See https://flutter.dev/docs/get-started/install/windows

    flutter run

    You will see below like screen after you have build your app successfully

    logo

    Try hot reload

    Flutter offers a fast development cycle with Stateful Hot Reload, the ability to reload the code of a live running app without restarting or losing app state. Make a change to app source, tell your IDE or command-line tool that you want to hot reload, and see the change in your simulator, emulator, or device.

    Important

    Do not stop your app. let your app run.

    Configuration & Customization

    Android Configuration

    Setup Firebase


    Setup AdMob


    Open Android module in Android Studio


    Change Application Name


    Change Application Icon


    Important

    Application icon name must be ic_launcher


    Change Application ID

    iOS Configuration


    Open Project in Xcode


    Change Bundle Name


    logo

    Change Bundle Identifier.

    Bundle Id is a unique Identifier of your of app on iOS and MacOS. iOS and MacOS use it to recognise updates to your app. The identifier must be unique for your app.


    logo

    Change App Icons


    Google SignIn:-

    In iOS Integration


    Open Xcode and then open Info.plist file.

    CFBundleURLTypes
                     
                            CFBundleTypeRole
                            Editor
                            CFBundleURLSchemes
                            
                                
                                
                                "Enter your REVERSED_CLIENT_ID" 
                    

    Apple SignIn:-

    In iOS Integration

    logo

    Firebase Configuration


    Create a Firebase project

    Before you can add Firebase to your Flutter app, you need to create a Firebase project to connect to your app. Visit Understand Firebase Projects to learn more about Firebase projects.


    Important

    If you're releasing your Flutter app on both iOS and Android, register both the iOS and Android versions of your app with the same Firebase project.

    Visit for more information on how to setup for Android

    Visit for more information on how to setup for iOS


    Register your app with Firebase


    Add a Firebase configuration file

    Follow the instruction for enabling Firebase services in your Android app here


    Flutter Configuration

    Setup AdMob


    Setup OneSignal

    1. Create a OneSignal Account

    One Signal is used for send the push notification into mobile or web. for more detail about OneSignal Documentation.

    Follow below steps

    No matching client found for package name


    • The error is "package_name" in google-services.json is not matching with your "applicationId" in app gradle.
    • Just make sure the package_name and applicationId both are same.
    Learn more at firebase-configuration

    Flutter SDK Not Available


    Download the SDK and point the SDK folder path in your future projects.

    There are different sources you can try

    1. You can clone it from the Github Repository
    2. Download SDK zip file + extract it after downloading
    3. You can also Download any version(including older) from here (For Mac, Windows, Linux)

    Use the SDK path in your future projects

    logo

    Dependency Error


    When you run the application and you see error like this

     Running "flutter pub upgrade" in mighty_ui_kit...
    The current Flutter SDK version is 1.17.5.
    Because mighty_ui_kit depends on flutter_svg >=0.18.0 which requires Flutter SDK version
    >=1.18.0-6.0.pre <2.0.0, version solving failed. pub upgrade failed (1; Because
    mighty_ui_kit depends on flutter_svg >=0.18.0 which requires Flutter SDK version
    >=1.18.0-6.0.pre <2.0.0, version solving failed.) Process finished with exit code 1
    Error Possibilities:
    Generally, this error occurs when 
    Error Possibilities

    Generally, this error occurs when

    1. one of your third party package version is not supported.
    2. your Flutter SDK version not matched with one of your third party packages. for ex, your current Flutter SDK version is 1.20.0 and third party package targets Flutter SDK version 1.17.0.

    Solution


    After implementing the above solution, run the below command in the terminal.

    flutter pub get

    FAQ

    Update the existing code with new release

    Special Notes

    As per envato policy installation, setup and configurations or modification are not included in free support. Free support is only for any bug/ error in original code. we do not provide installation and customization support in FREE SUPPORT.
    Still, We are providing steps for How to update future release code to existing source code for your knowledge purpose.

    PLEASE DO NOT CREATE TICKETS IF YOU FACE ANY ISSUE DURING UPDATE YOUR CODE. WE WILL NOT PROVIDE ANY SUPPORT ON THAT.
    How to update future release code to existing source code

    If you want which file changes are on the latest updated version then you have to manage the git repository by yourself.

    For First time: Initial project downloaded from codecanyon server.

    Step 1: Create or login with gitlab

    Login or register your account with gitlab: https://gitlab.com/users/sign_in

    Step 2: Create a new project in GitLab
    • In your dashboard, click the green New project button or use the plus icon in the navigation bar. This opens the New project page.
    • On the New project page -> Create a blank project.

    • logo

      logo
    Step 3: Clone your project to your local system
    • 1. Once project is created on your gitlab server. You have to clone the project to your local system. You can clone it with the command line.
    • 2. git clone “repository path”
    • 3. Copy your project url and clone into your exiting system

    • logo

      logo
    • 4. Once successfully clone then system will create a folder on your system

    • logo
    Step 4: Download project from codecanyon server Step 5: Copy/paste your initial downloaded project to clone directories.

    Once successfully downloaded project from codecanyon, copy/paste your downloaded project into clone directories

    • Note
    • Only orignal source code is put here.
    logo
    Step 6: Commit and push to gitlab server

    Onces copy/paste your changes to clone directres, you have to push all files to your gitlab server. For that use the following commands.

    Before commit to server directores, you have to remove below folder from your project

    • 1. build
    • 2. .idea
    • 3. .gradle

    After That follow below steps

    • 1. Goto inside your clone directory project
    • logo
    • 2. Add your all files with “git add .” command
    • 3. Now commit your changes with below command
    • 4. git commit -m ‘initial commit’
      • Note
      • Write your latest version message instead of “initial commit”.
      logo
    • 5. Push your changes to server with below command
    • “git push” And provide you gitlab credential details

      logo
    • 6. Check your all changes to gitlab server
    logo

    For Update existing code (If Already have old version of project)
    • Note
    • If you remove the project from the local system then clone the project again from your gitlab server. Follow the same above Step 3: Clone your project to your local system
    Step 1: Download the latest version from codecanyon server.

    Once you will received mail for updates. Just download latest code from codecanyon server.

    Step 2: Copy/paste your initial downloaded project to clone directories.

    Once successfully downloaded project from codecanyon, copy/paste your downloaded project into clone directories

    • Note
    • Only orignal source code is put here.
    Step 3: Commit and push to gitlab server

    Follow same Step 6: Commit and push to gitlab server

    Step 4: Check updated files

    After committing your latest changes. Goto the gitlab project dashboard and click on the commit link.

    logo

    Click on link which you have commit message on above steps 3

    logo

    Now check the all changed file.

    logo

    Click on “XYZ changed file” to see which file has been changed.

    logo

    Change Log

    Version 6.1 – 6 Jun 2022

    Version 6.0 – 25 Mar 2022

    Version 5.0 – 14 sep 2021

    Version 4.0 – 02 July 2021

    Version 3.0 – 26 May 2021

    Version 2.0 – 11 May 2021

    Version 1.0 – 08 May 2021

    Change Log

    Version 7.1 – 6 Jun 2022

    Version 7.0 – 25 Mar 2022

    Version 6.0 – 14 sep 2021

    Version 5.0 – 02 July 2021

    Version 4.0 – 28 May 2021

    Version 3.0 – 26 May 2021

    Version 2.0 – 12 May 2021

    Version 1.0 – 08 May 2021

    MeetMighty Help & Support

    We like to hear you out when you get stuck or encounter difficulty with our products. As soon as you buy one of our products – you can open a support ticket and share your concern right away.

    Submit support ticket: https://support.meetmighty.com/


    Support Policy:

    It is recommended that before submitting a ticket you take a close look at product documentation (Docs folder in the archive you have downloaded from Themeforest/Codecanyon). To get technical support and assistance, you need to have a valid purchase code. You will find this when you SignIn your Codecanyon/Themeforest “Download” page. Click on the product’s download link.

    Please Note:

    Free support policy includes troubleshooting, technical assistance with the product only. It does not include any customization, additional features integration or concerns about third-party plugins compatibility. But, support is applied to plugin(s) we have developed and integrated ourselves. We appreciate your understanding!

    If you need assistance and information on purchased product that is not covered in documentation, post them on our support portal at https://support.meetmighty.com/ You can expect answer within 24-48 hours, usually as soon as possible in the order they were received.

    Additionally, if any support ticket has no response from the item owner for more than 7 days, that support ticket will be closed by default. However, if you need further assistance, you can create a new ticket.

    All support requests are being processed on business days (Monday to Saturday) from 9:00 to 18:00 (GMT +05.30). We are in GMT+5:30 time zone. We address all the support queries 6 days weekly on the first-come, first-solve basis (Sundays off).

    Do you have any pre-sales questions or concerns, please write to us via our website contact page or email us at [email protected]. We like getting positive feedback from our customers, and this is why we do our best to earn it! Write a review: https://codecanyon.net/downloads

    Change Log

    Update your application to give for the best experience – check out what’s new and improved. Thank you

    Thank you for purchasing our application

    logo