Active Quiz Flutter Setup

Getting Started

To set up and customize the Active Quiz Mobile App, you'll need to:

• Set up your Flutter development environment
• Configure the project and run it
• Change package name and app name as needed
• Integrate Firebase services
• Connect to your Admin Panel
• Customize the appearance and features
• Generate a release version for app stores

App Architecture

The Active Quiz Mobile App is built with Flutter, allowing for a single codebase that works on both iOS and Android platforms. The app uses Firebase for backend services, including:

• Authentication
• Cloud Firestore database
• Cloud Functions
• Firebase Storage
• Firebase Analytics
• Firebase Crashlytics

Connecting to Admin Panel

The mobile app connects to the same backend as the web version, managed through the Admin Panel. This ensures consistent data and user experiences across all platforms.

Flutter Setup

This guide will walk you through setting up Flutter for the Active Quiz App development.

Setting Up Flutter

Flutter is an open-source UI software development toolkit created by Google that allows you to build natively compiled applications for mobile, web, and desktop from a single codebase.

Installing Flutter

1. Download Flutter SDK from flutter.dev
2. Extract the downloaded zip file in a location of your choice (avoid paths with special characters or spaces)
3. Add Flutter to your PATH environment variable
4. Open a terminal/command prompt and run the following command to verify the installation: flutter doctor

Setting Up an IDE

You can use any of the following IDEs for Flutter development:

1. Android Studio / IntelliJ IDEA (recommended):
   • Install Android Studio from developer.android.com
   • Install the Flutter and Dart plugins from the marketplace
2. Visual Studio Code:
   • Install VS Code from code.visualstudio.com
   • Install the Flutter and Dart extensions from the marketplace

Setting Up Android SDK

1. Open Android Studio
2. Go to SDK Manager (Tools > SDK Manager)
3. Install the latest Android SDK
4. Install Android Emulator or connect a physical device

Setting Up iOS Development (Mac Only)

1. Install Xcode from the App Store
2. Install the Xcode Command Line Tools
3. Set up an iOS simulator or connect a physical iOS device

Running the Flutter Project

After setting up your development environment, you can now run the Active Quiz Flutter project:

1. Open a terminal/command prompt and navigate to the project directory
2. Run the following command to get all dependencies: flutter pub get
3. Connect a device or start an emulator/simulator
4. Run the project: flutter run

Troubleshooting Flutter Setup

If you encounter any issues during the Flutter setup, try the following:

1. Run flutter doctor -v for more detailed information
2. Follow the recommendations provided by the Flutter doctor
3. Make sure your Android SDK and iOS development tools are properly set up
4. Check your PATH environment variable
5. Restart your computer after installation

App Configuration

After setting up Flutter and running the project, you'll need to customize the Elite Quiz App to match your requirements.

Changing Package Name

The package name (also known as application ID) uniquely identifies your app on the device and in the Google Play Store. You'll need to change it to your own package name before publishing.

Using Android Studio or IntelliJ IDEA:

1. Open the project in Android Studio
2. Right-click on the main app package (com.wrteam.elitequiz) in the Project panel
3. Select Refactor > Rename
4. Select "Rename Package" from the options
5. Enter your new package name following the reverse domain name convention (e.g., com.yourcompany.yourappname)
6. Click "Refactor" and confirm any prompts

Alternative Method 1:

1. Open android/app/build.gradle file
2. Find the applicationId property
3. Change its value to your desired package name:

            defaultConfig {
                applicationId "com.yourcompany.yourappname"
                // ...
            }
                        

Alternative Method 2 (Manual Replacement):

1. Open your project in Android Studio or VS Code
2. Use the "Replace in Files" or "Find and Replace" feature
3. Find all occurrences of "com.wrteam.elitequiz" and replace with your package name

Changing Application Name

The application name is what users will see on their device under the app icon.

1. Open the file android/app/src/main/AndroidManifest.xml
2. Find the android:label attribute in the application tag
3. Change its value to your desired app name:

                            <application
                            android:label="Your App Name"
                            ...>
                        

1. For iOS, open the file ios/Runner/Info.plist
2. Find the key CFBundleName and change its value:

            CFBundleName
            Your App Name
                        

Changing App Version

The app version is important for tracking releases and updates.

1. Open the file pubspec.yaml at the root of your project
2. Find the version property
3. Update it to your desired version:

            version: 1.0.0+1 # format is version_name+version_code
                        

Where:

• The first part (1.0.0) is the user-visible version name
• The second part (1) is the internal version code used by the Play Store (should be incremented for each release)

Next Steps

After configuring these basic settings, you'll need to:

1. Integrate Firebase services
2. Connect to your Admin Panel
3. Customize the app appearance
4. Configure ads and in-app purchases
5. Test your app thoroughly
6. Generate a release build

Firebase Integration

Active Quiz uses Firebase for authentication, real-time database operations, and cloud storage. This guide will walk you through integrating Firebase with your app.

Add Firebase to Your Flutter App - Full Setup Guide

This guide walks you through integrating Firebase into your Flutter app using the FlutterFire CLI. The process is broken down into three clear steps:

Step 1: Prepare Your Workspace

Before diving in, make sure you've got all the essentials in place.

• Flutter SDK installed
• Firebase CLI installed
• Flutter Project created

Run the command below if you don't have one yet:

            flutter create your_project_name
                        

Step 2: Install and Run the FlutterFire CLI

This is where Firebase and Flutter shake hands.

1. Activate the FlutterFire CLI globally:

            dart pub global activate flutterfire_cli
                        

1. Configure Firebase for your project:

Make sure you're inside the root of your Flutter project:

            flutterfire configure --project=
                        

Example:

            flutterfire configure --project=fir-db266
                        

This will:

• Link Firebase with your app
• Generate lib/firebase_options.dart

Step 3: Initialize Firebase in Flutter

Note: the 3rd step is already done by the app developer, you'll just need to use the CLI commands given above.

Now let's wire it all together in the code.

Add the required dependencies:

In your pubspec.yaml:

            dependencies:
              firebase_core: ^latest
                        

Then run:

            flutter pub get
                        

Update your main.dart:

            import 'package:flutter/material.dart';
            import 'package:firebase_core/firebase_core.dart';
            import 'firebase_options.dart';
            
            void main() async {
              WidgetsFlutterBinding.ensureInitialized();
              await Firebase.initializeApp(
                options: DefaultFirebaseOptions.currentPlatform,
              );
              runApp(MyApp());
            }
                        

Enabling Firebase Authentication

Elite Quiz supports multiple authentication methods. Here's how to enable them:

1. In the Firebase console, go to Authentication > Sign-in method
2. Enable the authentication methods you want to use:

• Email/Password
• Google

Configuring Google Sign-In

Enable Google Sign-In in Authentication Sign-in methods. Make sure you've added your SHA-1 fingerprint to your Firebase project.

Connecting to Admin Panel

The final step is to connect your app to your Admin Panel:

1. Open the file lib/src/utils/methods.dart in your project
2. Look for the baseUrl constant and update it with your Admin Panel URL:

            const String baseUrl = "https://your-admin-panel-url.com/api";
                        

Make sure not to include the trailing slash at the end of the URL.

Testing Firebase Integration

After completing all the steps above, restart your app and test the following:

1. Social authentication methods (Google)

If any issues occur, check the Firebase console logs and your app logs for detailed error messages.

App Customization

Customize the Elite Quiz App to match your brand identity and preferences.

Changing App Logo

You can customize the app logo that appears in the drawer menu and various screens:

1. Navigate to assets/logo/ directory in your project
2. Replace the logo.png file with your own logo (keep the same filename)
3. Make sure your logo has the appropriate dimensions (recommended: 512x512 pixels)

Run the commands:

            flutter pub get
            flutter pub run flutter_launcher_icons:main
                        

App Monetization Guide

Configuring Google AdMob

Active Quiz supports Google AdMob for displaying advertisements within the app. Follow these steps to set up AdMob:

Step 1: Creating an AdMob Account

1. Go to AdMob.com and sign in with your Google account.
2. Create a new app in the AdMob console or link to your existing app.
3. Retrieve your AdMob App ID for both Android and iOS.

Step 2: Adding Ad Units

In the AdMob console, create the following ad units:

• Banner Ad
• Interstitial Ad
• Rewarded Ad
• App Open Ad
• Native Ad

Make sure to note down the ad unit IDs for each ad type.

Step 3: Enabling Ads in the App

1. Navigate to your Admin Panel and go to System Settings.
2. Locate the Android/iOS ad Setting section and enable the ad types you want to display (Banner, Interstitial, Rewarded, Native, App Open).

Step 4: Update Configuration Files

1. For Android:

Open android/app/src/main/AndroidManifest.xml. Add or replace the AdMob App ID inside the tag:

1. For iOS:

Open ios/Runner/Info.plist. Add or replace the AdMob App ID:

            GADApplicationIdentifier
            ca-app-pub-XXXXXXXXXXXXXXXX~YYYYYYYYYY
                        

Configuring Unity Ads

To configure Unity Ads for your app, follow these steps:

Step 1: Create a Unity Account

1. Go to Unity.com.
2. Click on Sign In (top right) and select Create a Unity ID.
3. Verify your email by checking your inbox or spam folder.

Step 2: Set Up Unity Dashboard

1. Navigate to the Unity Dashboard.
2. Log in with your Unity credentials.
3. From the sidebar, click on Monetization > Projects.

Step 3: Create a New Project (Game)

1. Click Add Project.
2. Enter the following details:

• Project Name (e.g., FlutterQuizApp)
• Choose Platform(s) - Android and/or iOS.

1. Click Add Project.

Step 4: Get Your Unity Game ID

1. Go to Monetization > Platforms.
2. Choose your platform (Android or iOS).
3. Copy the Game ID and use it in your Flutter main.dart.

Example:

• Android Game ID: 1234567
• iOS Game ID: 7654321

Step 5: Enable Ads (if needed)

1. Navigate to Monetization > Placements.
2. By default, Unity creates two placements:

• Video (non-rewarded)
• Rewarded Video

You can create more placements or rename existing ones as needed.

App Deployment

Once you've customized and tested your Active Quizzop app, the final step is to prepare it for deployment to app stores.

Generating a Release Version

Android Release

1. Create a Keystore File:

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

1. Create key.properties File:

• Create a file named key.properties in the android/ directory
• Add the following content (replace with your keystore details):

            storePassword=your_keystore_password
            keyPassword=your_key_password
            keyAlias=key
            storeFile=path_to_your_keystore_file
                        

1. Configure Gradle for Release:

The android/app/build.gradle file is already configured to use the keystore for release builds.

1. Build Release APK:

            flutter build apk --release
                        

Or to build a bundle for Google Play:

            flutter build appbundle --release
                        

iOS Release

1. Configure Xcode Project:

• Open the ios/Runner.xcworkspace file in Xcode
• Configure signing with your Apple Developer account
• Set the bundle identifier to match your registered App ID

1. Set up Archive Configuration:

• Select "Generic iOS Device" as the build target
• Go to Product > Archive

1. Build IPA File:

After archiving, the Xcode Organizer will open.

• Click "Distribute App" and follow the steps for App Store distribution

Publishing to App Stores

Google Play Store

1. Create a developer account at play.google.com/apps/publish
2. Create a new application
3. Fill in all the required information:

• App description
• Graphics (icon, feature graphic, screenshots)
• Categorization
• Content rating
• Pricing & distribution

1. Upload your APK or App Bundle
2. Submit for review

Apple App Store

1. Create a developer account at developer.apple.com
2. Go to App Store Connect
3. Create a new iOS app
4. Fill in all the required information:

• App description
• Screenshots
• Keywords
• Support URL
• Marketing URL
• Privacy Policy URL

1. Upload your build through Xcode or Transporter
2. Submit for review

Post-Launch Considerations

App Analytics

Elite Quiz includes Firebase Analytics by default. To access analytics:

1. Go to the Firebase Console
2. Select your project
3. Go to Analytics

Updating Your App

When you need to update your app:

1. Make your code changes
2. Increment the version number in pubspec.yaml
3. Generate new release builds
4. Upload to the app stores
5. Consider using the force update feature for critical updates

App Store Optimization

To improve your app's visibility:

1. Use relevant keywords in your app title and description
2. Create high-quality screenshots and videos
3. Encourage users to rate and review your app
4. Respond to user reviews
5. Update your app regularly

Troubleshooting Deployment Issues

Common Issues:

1. Signing Issues: Ensure your keystore is properly configured for Android and your certificates are valid for iOS.
2. Missing Permissions: Check the AndroidManifest.xml and Info.plist files for all required permissions.
3. Play Store Rejection: Common reasons include metadata issues, privacy policy concerns, or functionality problems.
4. App Store Rejection: Common reasons include UI guideline violations, crash on review, or metadata issues.

If you encounter any deployment issues, please contact our support team for assistance.

Frequently Asked Questions

General Questions

How do I change the app logo?

To change the app logo, navigate to assets/images/ in your project and replace the app_logo.png file with your own logos. See the App Customization section for more details.

How do I change the app colors?

Edit the color constants in the lib/utils/constants.dart file to match your brand colors. Check the App Customization section for more information.

How do I add a new language?

You can add new languages either through the admin panel or by adding new language files to the project. See the App Customization section for detailed instructions.

Firebase Integration

Why do I need Firebase?

Firebase is essential for several key features:

• User authentication (Google)
• Analytics and crash reporting
• Push notifications

How do I set up Firebase for my app?

Follow the detailed instructions in the Firebase Integration section, which covers creating a Firebase project, adding your app, and configuring authentication methods.

Monetization

How do I set up AdMob ads?

Create an AdMob account, generate ad unit IDs, and add them to your app. Enable ads in the admin panel. See the App Monetization section for details.

Customization

How do I manage badges in the app?

Badges can be managed from the admin panel:

1. Go to Badges section in the admin panel
2. Add, edit, or remove badges as needed
3. Set the conditions for earning each badge

How do I modify battle messages?

Battle messages can be customized in the app:

1. Open the file lib/utilsConstants.dart
2. Look for the battle message constants
3. Modify them as needed

Deployment

How do I generate a signed APK for Android?

Follow these steps:

1. Create a keystore file
2. Add a key.properties file to the android/ directory
3. Run flutter build apk --release

See the App Deployment section for detailed instructions.

How do I submit my app to the App Store?

Prepare your Xcode project, archive your app, and submit it through App Store Connect. See the App Deployment section for a complete guide.

Troubleshooting

My app crashes when logging in with Google

Ensure you've added the correct SHA-1 fingerprint to your Firebase project and properly configured the Google Sign-In settings.

How do I resolve "Failed to load AdMob ads" error?

• Check that your AdMob IDs are correct
• Ensure the AdMob account is properly set up and approved
• Test with test ad IDs during development
• Check if you've added the required permissions in AndroidManifest.xml and Info.plist

Firebase authentication is not working

• Verify that you've enabled the authentication methods in Firebase console
• Check that you've added the correct configuration files (google-services.json and GoogleService-Info.plist)
• Make sure you've added all required dependencies in pubspec.yaml

The app runs in debug mode but crashes in release mode

This is often due to code obfuscation or missing ProGuard rules. Make sure you've added the necessary ProGuard exceptions for any libraries you're using.

Getting Support

If you encounter issues not covered in this documentation, please contact our support team through:

• Email: activeithub@gmail.com
• Skype: See the Support section for Skype contacts