Introduction

Here is the quick documentation to setup the web part of the Shortzz application created in PHP Laravel. Please follow all the steps correctly and carefully setup the project.

System Required

Gmail Account credentials for Firebase
Apple developer account credentials : Create Account
Android Studio : Download
Flutter Sdk : Download
Agora Account : Create Account
Branch.io Account : Create Account
Xcode (Only Mac Users).

Setup Flutter SDK

Skip this step, If you have already setup Flutter SDK.

For Mac :

Install the android studio
Download Android Studio

Launch the Android Studio DMG file.
Drag and drop Android Studio into the Applications folder, then launch Android Studio.

Install the Flutter SDK

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

Extract the file into the directory you want to store the Flutter SDK.

unzip ~/Downloads/flutter_macos_arm64_3.24.3-stable.zip \ -d ~/development/

Add Flutter to your PATH

Open terminal
Run:

vim ~/.zshrc

Press 'I' to insert the path as (export PATH=/Users/DK/flutter/bin:$PATH). Here /Users/DK/ is the folder where Flutter is installed

Add:

export PATH="$PATH:/Volumes/DK SSD/flutter Sdk/bin"

Hit Esc key, then enter :wq and then press Enter or return to save and exit the file

Restart Terminal
All set! To ensure everything is working correctly, enter the following command in the terminal.

flutter doctor

Configure iOS development

Install and configure Xcode

To develop Flutter apps for iOS, install Xcode to compile to native bytecode.

Open the App Store and sign in.
Search for Xcode.
Click Install.

The Xcode installer takes up 6+ GB of storage. The download might take some time.

To configure the command-line tools to use the installed version of Xcode, use the following commands.

sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

Use this path for the latest version of Xcode. If you need to use a different version, specify that path instead.

Sign the Xcode license agreement.

sudo xcodebuild -license

Install CocoaPods

Install cocoapods following the CocoaPods install guide.

sudo gem install cocoapods

Configure your target iOS device

With Xcode, you can run Flutter apps on an iOS device or on the simulator.

https://docs.flutter.dev/get-started/install/macos/mobile-ios#configure-your-target-ios-device

Check your development setup

Open your Terminal.
To verify your installation of all the components, run the following command.

flutter doctor

As you chose to develop for iOS, you do not need all components. If you followed this guide, the result of your command should resemble:

Note : If you do not configure iOS development : link

Configure Android development

Configure the Android toolchain in Android Studio

Agree to Android licenses

Open an elevated console window.
Run the following command to enable signing licenses.

flutter doctor --android-licenses

Troubleshooting licensing issues

Unable to find bundled Java version

Go to finder and find Android studio:

Right click and click show package contents
Create a new folder called jre
Copy the contents of the jbr folder and paste them into jre folder

Check your development setup

Open your Terminal.
To verify your installation of all the components, run the following command.

flutter doctor

As you chose to develop for Android, you do not need all components. If you followed this guide, the result of your command should resemble:

Note : If you do not configure Android development : link

For window :

Download and install from Android Studio.

After installation, install the Flutter and Dart plugins from File > Settings > Plugins.

Extract the zip file to a desired location (e.g., C:\src\flutter).

Update Your Path
- Open Start and search for Environment Variables.
- In the System Properties window, click Environment Variables.
- Under System variables, find the Path variable, and select it. Click Edit.

Click New and add the path to the flutter\bin directory (e.g., C:\src\flutter\bin).
Click OK to close all windows.

Open android studio and click new project.

Then top toolbar, click on File.
Then click on Settings (or press Ctrl + Alt + S ).

In your terminal (Command Prompt or PowerShell), run the following command:

flutter doctor --android-licenses

You will be prompted to review and accept each of the Android SDK licenses.
Press y for "yes" to accept the licenses as they appear.

flutter doctor

Note : If you do not configure flutter SDK : link

Setup Firebase

Go to the Firebase Console.
Click Add Project and follow the instructions to create a new project.

Giving a name to the project

Enable the Google Analytics feature if needed, and configure your project.

First Choose default Firebase account and then create project

Android Setup

Open the project in Android Studio. Then, click Pub get as shown in the image below.

If your project uses CameraPlugin, follow the steps shown in the image below.

How to get SHA1 Key : Link

In the Firebase Console, select Add Firebase to your Android app.

Register your app by providing your Android package name (e.g., com.example.app).

Download the google-services.json file after registering your Android app and place it in the android/app directory.

Change app name

Change app icon

Run Your Flutter App

Select the Android device from the device list or connect a physical device via USB.
Click on Run (the green play button) or run the following command in the terminal

flutter run

iOS Setup

Open iOS directory in Xcode.

Select the Runner Target:
- - In the project navigator on the left, select Runner (under the "Targets" section).
Go to the General Tab:
- - In the middle of the window, you will see different tabs like General, Signing & Capabilities, Resource Tags, etc.
- - Click on the General tab.
Set Your Developer Team:
- - Scroll down to the Signing & Capabilities section under the General tab.
- - In the Team dropdown, choose your developer account (Apple Developer Program).
  - If you haven't added your Apple ID yet, click Add Account in the dropdown, sign in with your Apple ID, and select the team.

Change the Bundle Identifier:

Under the Signing & Capabilities section, find the Bundle Identifier field.
Change the value of the bundle identifier to your desired one, e.g., com.yourcompany.yourappname.

Change the App Name:

To change the display name of the app:
- Under the general section, find the Display Name field.
- Change its value to the desired app name. This will change the app name that appears under the app icon on users' devices.

In the Firebase Console, select Add Firebase to your iOS app.

Register your iOS app by providing the Bundle ID.

Download the GoogleService-Info.plist file and place it in the ios/Runner directory.

Remove the old GoogleService-Info.plist file and add the new one.

Change app icon

Install Pods for Your Flutter Project

Open terminal in Android Studio.
Go to your Flutter project directory and run

cd ios

pod install

Run Your Flutter App

Make sure you have an iOS device or an iOS Simulator set up.
In Android Studio, select the iOS Simulator or a connected iOS device from the device dropdown list.
Click on Run (the green play button) or run the following command in the terminal

flutter run

Change Base URL

Find the shortzz_flutter.zip from the folder downloaded from codecanyon and open in android studio.
Open shortzz_flutter>lib/utils/const_res.dart
Replace "apiKey" with your apiKey.
Replace "baseUrl" with your BaseUrl.
Replace "itemBaseUrl" with your ItemBaseUrl.
All of these values can be found at the end of the backend documentation. so it is a must to follow backend documentation before starting here.

Change app color

Step 1 : Now go to your project lib > utils > color_res.dart as shown in the below image.

Change app font family

Step 1 : Select any font from google font

Here’s how you download the font:

Visit the https://fonts.google.com/
Search for your font.
Once you find it, click to open.
Click on the Download Family button on the top right side of your screen.
Extract the compressed file.

Step 2 : Import the Font into Project

To import the Font in your project:

Copy-Paste [font].ttf file into the fonts folder.

Step 3 : Add Font to Pubspec.yaml

To add Font to pubspec.yaml file:

Replace the family name with your font family. To get the family name, simply take the first part before the dash sign (-). For example, if the downloaded font name is Montserrat-Regular , take the Montserrat as your family name
Go to pubspec.yaml file:
Replace the asset path with the path where your font is residing.
Then pub get to successfully load your font

Configure Firebase

Go to the firebase project you might created while following backend documentation.
If you don't have, follow the steps below and create one project.
At first, follow this link https://firebase.google.com/

Now, we first have to create a Firebase project. Firebase project will go through and describe what it is. This allows us to add an app to that project. It can have many projects inside of Firebase.

Now, we have to give a name and id to the project, enable Google Analytics for the project, set an analytics location, and accept all the terms and conditions. Firebase console automatically creates a unique id for the project.

Step 1 : Giving a name to the project

Step 2 : Enable Google analytics for the project

Step 3 : First Choose default Firebase account and then create project

Firebase authentication

Our app supports the following authentication methods: Email, Google, and Apple Sign-In.

Email Authentication Only

Google Authentication Only

If you haven’t added the SHA1 key, go to this link.

Apple Authentication Only

Create APNs Auth key for push notification

Open https://developer.apple.com/account
Log in using your Apple developer credential.
You obtain a provider certificate from your developer account In the certificates section first as shown in the below image.
Select Certificate, IDs & Profiles tab.

Select keys tab.
Tap on the + button.

A key can be generated which gives the FCM full access over the Apple Push Notification service (APNs). On the "Keys" menu item, register a new key. The name of the key can be anything, however you must ensure the APNs service is enabled:

Click "Continue" & then "Save". Once saved, you will be presented with a screen displaying the private "Key ID" & the ability to download the key. Copy the ID, and download the file to your local machine:

Copy Key ID & Download File

The file & Key ID can now be added to your Firebase Project. On the Firebase Console, navigate to the "Project settings" and select the "Cloud Messaging" tab. Select your iOS application under the "iOS app configuration" heading.s

Upload the downloaded file and enter the Key & Team IDs;

Enable firestore

Step 1 : Click on Firestore Database and Create database.

Step 2 : Model will be open click on Next.

Step 3 : Then click Enable button

Step 4 : After create Database, You have to change rules of database then click publish button. Follow step, shown below.

Step 5 : Create 2 indexes in firestore.

Setup Agora

Follow This guide and setup project at agora and collect App id
Go to your flutter project and Paste Here : bubbly>lib>utils>const.dart

Paste here : bubbly>lib>utils>const.dart

Branch.io Setup

Follow This guide and setup project at Branch.io.

In App Purchase

iOS : Set up In-App Purchase by following Documentation .
Android : Set up In-App Purchase by following Documentation .

Create Coin Plans in Admin Panel.

Click Add Coin Plan.
Set Price , Diamond and Play Store Id (a unique Product Id you created while following above Documentation).
Click Submit.

For Android, Purchase will start working once the app gets approved on playstore.
For iOS, Purchase will start working once in app purchases gets approved by apple on appstore connect.

Update info

To upgrade your project, you have to Add/Update/Remove files. Please check below file for the information.
File name : README.md
Please be careful while making an updates this way, It might result in errors sometimes.
If it comes any issues while making an update, you are absolutely responsible for that since updating existing project is not included in the support.

Want to talk with us?

Telegram (Support Desk) : +91 7990425274
Email : help.retrytech@gmail.com
Whatsapp (No Support Here) : +91 7990425274

Introduction

System Required

Setup Flutter SDK

For Mac :

Install the android studio

Install the Flutter SDK

Add Flutter to your PATH

Configure iOS development

Install and configure Xcode

To develop Flutter apps for iOS, install Xcode to compile to native bytecode.

Install CocoaPods

Configure your target iOS device

With Xcode, you can run Flutter apps on an iOS device or on the simulator.

Check your development setup

Configure Android development

Configure the Android toolchain in Android Studio

Agree to Android licenses

Troubleshooting licensing issues

Unable to find bundled Java version

Go to finder and find Android studio:

Check your development setup

For window :

Update Your Path

Setup Firebase

Android Setup

Change app name

Change app icon

Run Your Flutter App

iOS Setup

Change the Bundle Identifier:

Change the App Name:

Change app icon

Install Pods for Your Flutter Project

Run Your Flutter App

Change Base URL

Change app color

Change app font family

Configure Firebase

Firebase authentication

Email Authentication Only

Google Authentication Only

Apple Authentication Only

Create APNs Auth key for push notification

Enable firestore

Setup Agora

Branch.io Setup

In App Purchase

Update info

Want to talk with us?