### Introduction to MagicMate

MagicMate sounds like a comprehensive app that helps with event management, organization, and planning. As a virtual assistant, Provide some general information about event management apps and their features.

Flutter is a popular framework for building mobile apps, and it's great to hear that MagicMate offers a full solution app using this technology. This likely means that the app is cross-platform compatible, meaning it can be used on both iOS and Android devices, which is a huge advantage for event organizers who want to reach a wider audience.

Overall, an event management app like MagicMate can be incredibly useful for anyone who regularly plans events, from small gatherings to large conferences. The convenience of having all the necessary information and tools in one place can save time and reduce stress, making the planning process more enjoyable and successful.

It comes with 10000+ hours save time for custome app development. It works great with both android and iOS.

The same code is used for iOS and Android

##### Prerequisite

Android Studio: Android Studio Flamingo | 2022.2.1 Patch 2

Flutter: 3.16.5

Dart version: 3.2.3

### 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​

- Download Android Studio - https://developer.android.com/studio/
- Get the Flutter SDK - https://flutter.dev/docs/get-started/install
- Learn more about Android Studio - https://developer.android.com/studio/intro/

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:

- If the entry exists, append the full path to flutter\bin using ; as a separator from existing values.
- If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin as its value.

- Info
- 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​

- Download Android Studio - https://developer.android.com/studio/
- Download Xcode - https://apps.apple.com/us/app/xcode/id497799835?mt=12
- Get the Flutter SDK - https://flutter.dev/docs/get-started/install
- Learn more about Android Studio - https://developer.android.com/studio/intro/

Step 1 : Get the Flutter SDK

- Download the following installation bundle to get the latest stable release of the Flutter SDK:
- Download SDK and extract downloaded file, just double click on that. and just copy extracted folder and paste it to your desired location (for example, Documents\flutter).

Step 2 : Update your path

- Warning
- 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​​

- Download Android Studio - https://developer.android.com/studio
- Get the Flutter SDK - https://flutter.dev/docs/get-started/install/linux
- Learn more about Android Studio - https://developer.android.com/studio/intro/

Step 1 : Get the Flutter SDK

- Download the following installation bundle to get the latest stable release of the Flutter SDK:
- Download SDK and extract downloaded file, just double click on that. and just copy extracted folder and paste it to your desired location (for example, Documents\flutter).

Step 2 : Update your path

- Warning
- 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.

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

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.

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

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

- Important
- Don't open/change android code inside flutter because flutter doesn't compile android files.
- If you want add/change android code, click on
  Tools->Flutter->Open Android module in Android Studio Or File->Open ->open android module inside your project

- Important
- Don't change package name inside android/app/src/main/AndroidManifest.xml file

- Open Android Studio.
- Select Open an existing Android Studio Project.
- Open the android directory within your app.
- Wait until the project has been synced successfully. (This happens automatically once you open the project, but if it doesn’t, select Sync Project with Gradle Files from the File menu).
- Now, click on Run button.

Change Application Name

- You must want to change your application name. This is how you can do. Follow the below step.
- Open /android/app/src/main/AndroidManifest.xml and specify your application name.

    <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="YOUR_APPLICATION_NAME"
        android:icon="@mipmap/ic_launcher">
    <activity>

Change Application Icon

See How to generate an application icon?

- Browse your image and click on Download icon. After successfully generated, replace all icons in respective folders:

- /mipmap-hdpi in /android/app/src/main/res/ folder
- /mipmap-mdpi in /android/app/src/main/res/ folder
- /mipmap-xhdpi in /android/app/src/main/res/ folderr
- /mipmap-xxhdpi in /android/app/src/main/res/ folder
- /mipmap-xxxhdpi in /android/app/src/main/res/ folder

- Warning
- Application icon name must be ic_launcher

Change Application ID

- Follow the below steps to change you Application ID.
- Open /android/app/build.gradle

    defaultConfig {
       applicationId "YOUR_APPLICATION_ID"
       minSdkVersion 21
       targetSdkVersion 31
       versionCode 1
       versionName "1.0.0"
       testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

Generate Signed APK

- Go to in your project & then Tools -> Flutter -> Open for Editing in Android Studio as shown below
- If your 1st step option is not available then select File -> open -> Select main folder -> android.
- Open Project it in New Window
- Wait for while until project synchronization. After that Go to Build -> GenerateSigned Bundle/APK...
- Select Android App Bundle or APK Option as per your need. (Android App Bundle is best solution) and click Next button.
- Select Create new.. option to generate new Signed key (When you release your app First Time) and Fill all options. Refer this link
- Click Next button and you will get following screen...

Select Build variants - release and Signature versions both V1 and V2 respectively as shown above screen shot and click Finish button.

- Wait for a while until Gradle Build Running process complete.and finally you will get the Generate Signed APK : (APKs) generated successfully . from that click on Locate option to get Location of your Generate Signed APK Key.

### iOS Configuration

Open Project in Android Studio

- Open android studio in your project.
- Open terminal in android studio.
- Pub get.
- Open terminal cd ios.
- pod install.
- run project in xcode.

Open Project in Xcode

- Open Xcode.
- Select Open another Project.
- Open the iOS directory within your app.
- Now, click on Done button.

Change Bundle Name

- Select your project file icon in Group and files panel.
- Then Select Target -> Info Tab.
- At last change Bundle Name.

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.

- Select your project file icon in Group and files panel.
- Select General Tab.
- After Select General tab you can see the details of your application.
- In Identity section, rename your Bundle identifier.

Change App Icons

- see How to Generate App Icons?
- In Group and files panel find “Assets.xcassets” folder.
- In Assets.xcassets folder replace AppIcon.

## Flutter Configuration

##### Manually Change App Name

In main directory Go to app -> src -> main -> AndroidManifest.xml

Change YOUR_APP_NAME to your app name

    Androi:label=""

### PHP Setup

#### Requirements

- Important
- Required Admin Panel
- Required Subdomain configuration for the setup panel

- PHP >= 8.0
- MySQL >= 5.6
- Apache HTTP server
- OpenSSL PHP Extension
- Enable Output_buffering in Php.ini File

#### Installation Instructions

- Make Sub domain
- subdomain.yourdomain.com
- Unzip the MagicMate Admin Panel 1.0.zip file and ONLY use the extracted /root folder and upload in below directory based on your server
- In Linux
- Path: var/www/html/
- In cPanel:
- Inside File manager -> Path: public_html/
- Create the database on your server
- Import MagicMate 1.0.sql file in created database. ( Note : Only necessary for those client, who is setup project first time. )

##### Already imported MagicMate 1.0.sql

#### Admin Default credentials

    Email    : admin
    Password : admin@123

#### 1. Change Database settings

For database settings, open the filemanager/evconfing.php file with a text editor and set your database settings.

Enter database name, database username, database password and the host details

#### 2. Change Map Key In Add Event Page

For Google Map settings, open the add_event.php file with a text editor and set your Map Key settings.

Replace Your Key With Below Both Screenshort. Replace Your Google Map Key With this String Map_Key_Here.

#### 1. Quick Start Admin Menu Guide

- 1. User Registration and Login: Users can register for an account with OTP and log in using their mobile number.
- 2. Create and Manage Events: Event Organizer can create events with details such as event name, date, time, location, and description. They can also manage and update their events.
- 3. Event Discovery: Users can discover events based on their location, interests, and categories.
- 4. Ticket Booking: Users can book tickets for events directly within the app. Ticket prices, availability, and payment methods are displayed clearly.
- 5. Payment Integration: The app supports multiple payment methods and mobile wallets.
- 6. Push Notifications: Users receive push notifications for important updates related to their events, ticket booking, and more.
- 7. Event Analytics: Event organizers can track event attendees, ticket sales, revenue, and other key metrics to optimize their events.
- 8. Reviews and Ratings: Users can leave reviews and ratings for events they attend, helping other users make informed decisions.
- 9. Multi-Language Support: The app supports multiple languages, making it accessible to a broader audience.
- 10. Admin Dashboard: The app includes an admin dashboard that allows admins to manage user accounts, events, payments, and more.
- 11. QR Code Check-In: Event organizers can use QR codes to check in attendees, reducing wait times and improving the overall event experience.
- 12. Real-Time Updates: The app provides real-time updates on events, including changes to event details and cancellations.

## Base URL Configuration

- Important
- Please do not change anything in the flutter code. If you use PHP backend you only need to set the base URL otherwise set only the puchase code.

#### With PHP Backend

##### Change Base URL, Add google Map API & Onesignal App ID For 2 Apps

In Main directory goto the utils folder and open constant.dart file and change your BASE_URL value.

    const BASE_URL="ADD YOUR BASE URL/user_api";

    const BASE_URL="ADD YOUR BASE URL/orag_api";

##### How to get Base URL

Open your Admin login page and copy the URL.

##### How to Change Google MAP API

Open your project and add it here.

### 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.

- Warning
- 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

- In the center of the Firebase console's project overview page, click the Android icon to launch the setup workflow.
- Enter your app's package name in the Android package name field.

- Warning
- Make sure that you enter the ID that your app is actually using. You cannot add or modify this value after you register your app with your Firebase project. Both applicationId should be matched.

- Click Register app.

Add a Firebase configuration file

- Click Download google-services.json to obtain your Firebase Android config file (google-services.json).
- Move your config file into the android/app directory of your Flutter app.

Next, go to the Authentication menu in Sidebar and enable the Phone Authentication option as shown in the above image.

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

Generate SigningReport

You need to generate SigningReport For add Sha1 and Sha-256 key for firebase Project Settings.

Add Sha1 and Sha256 key in firebase

After generate key you can add on firebase from project settings.

### OneSignal Configuration

Create a OneSignal Account and Make 3 different projects inside

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

if you have own OneSignal then login and create project. if you does not then register account and create project

Follow below steps

- Click in to New App/Website button.
- Enter the App/website name in AppName Field.
- Select one platform configure, for Example(iOS,Android,Web push).
- After Select Any One platform to configure. we can get Firebase Server Key and Firebase Sender Id. If you can select iOS platform then you can required the production Push Certificate.(.p12 Certificate) and then get Firebase server Key. Then Click on Save Button.
- After get Firebase Server key and Sender ID. Goto the firebase app and in left side you see Project overview and settings click on it and select Project Settings. and In Setting. select Cloud messaging. and Enter Server Key and Sender ID and at the end Click into Save Button.

Step 1: Create onesignal project in your account Choose android platform

Step 2: Go to your Firebase Console-> Project Settings -> Cloud Messgaing and copy 'Server Key' and 'Server ID'

Step 3: Now paste those values one by one here

Step 4: Choose Target SDK as Flutter

Step 5: Now copy App ID as shown below

Step 6: Paste this App ID here

    static const String oneSignel ="ADD YOUR APP ID";

Step 7: If you didn't have copy app id before then you can get Onesignal App ID from this settings here and paste it to admin setting tab

Step 8: Onesignal App ID & Rest Api Key paste it to admin setting tab

## v1.0.0(25 Feb 2023)

- Initial Release

## 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.

## Flutter SDK Not Available

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

There are different sources you can try

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

## Authorization header not found

Message: Authorization header not found

Note: If you faced this error during development then this error due to header not set on your admin panel

Solution: Just check Enable JWT Authentication section wordpress document to resolve this issue

### Expired token

#### Message: Expired token

This error occurs due to the Expired user token.

##### Solution: Logout and re-login to your flutter app

### Unsupported gradle version 7.*.*

#### Message: Unsupported gradle version 7.*.*

###### Solution:

1. Open project_root_directory/android in Android Studio

2. Wait for indexing

3. Now run your application from android module

## 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. Skype CSCODETECH or email: cscodetechuser@gmail.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!

You can expect answer within 24-48 hours, usually as soon as possible in the order they were received.

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

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

Version 1.0 - 23 May 2023

- Initial Release

## Thank you for purchasing our application

Thank you for purchasing our application! We're glad that you found what you were looking for. It is our goal that you are always happy with what you bought from us, so please let us know if your buying experience was anything short of excellent. We look forward to seeing you again.