Introduction to Mighty Chat

Keep your conversation longer and interesting with modern-build MightChat online messaging app. With Google and Email sign in, you can start talking to connections right away. MightChat is inspired from WhatsApp, Signal and WeChat-like app to offer even better user interface. The high quality chat screen and video call function makes each conversation more bright and lively. MightyChat uses Agora Library for Video calls.

Prerequisite

Must follow this

Project Structure & Features

User App Feature

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

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.

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

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

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.

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

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

Getting Started (Build & Run)

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

Build and Run App

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

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.

Configuration & Customization

Android Configuration

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

Setup AdMob

• For AdMob setup, you just need to change the app id in android/app/src/main/AndroidManifest.xml file
• For that, you have to create a firebase account and create a new application in AdMob. and then you will get application id.

Now, replace ca-app-pub-1399327544318575~7586962359 with your new generated application id.


• Now run the application. your ads are now live.

Open Android module in Android Studio

• 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

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 29
    versionCode 1
    versionName "1.0.0"
    testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}




Generate Signed APK

• Go to your project -> Tools -> Flutter -> Open for Editing in Android Studio as shown below




• Open Project 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.

Configuration & Customization Admim Panel

Create Firebase Web app

1. for firebase configuration goto ->web ->index.html

2. goto lib/main.dart line no 32 to 41 (firebaseoptions) replace with your firebase data.

Change App Name

Please go to lib -> utils -> config.dart and change the below data. Change your app name

const appName = 'YOUR APP NAME';

Add Admin

Please go to lib -> utils -> config.dart and change the below data.

const NAME = '';

const EMAIL = ';

const CONTACT_NUMBER = '';

const PASSWORD = '';

Change Fev Icon

Please goto -> web -> replace favicon.png with your favicon.

Steps For hosting Admin on Firebase

FOLLOW BELOS STEP FOR A HOSTING ADMIN PANEL ON THE FIREBASE

• 1. npm install -g firebase-tools
• 2. if firebase is not login with your terminal then firebase login
• 3. firebase init
1. - are you ready to proceed - > y
2. - select section to arrow down up and for select Use SPACEBAR to select features and enter
3. - build/web
4. - rewrite index file -> y
5. - auto builds and deploy github->n
6. - overwites-> y
• 4. flutter build web --no-tree-shake-icons
• 5. firebase deploy

You got your hosting url

iOS Configuration

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.

Change Admob App Id

• Open Xcode,Select the Info.plist from the file Manager.
• Change the GADApplicationIdentifier value.

                    
    <key>GADApplicationIdentifier</key>
        <string>Add your Admob appId</string>
    
    

Google SignIn:-

In iOS Integration

• First register your application.
• Make sure the file you download in steps 1 is name GoogleService-Info.plist.
• Move or Copy the GoogleService-Info.plist into the " [My_project] / ios / Runner".
• Open Xcode, the right-click on the Runner directory and select Add files into Runner.
• Select the GoogleService-Info.plist from the file Manager.
• A Dialog will show up and ask you to select the targets, select the Runner.
• Then add the CFBundleURLTypes attritubes below into the " [My_project] / ios / Runner/ Info.plist " file.
• Then Run your Project.

Open Xcode and then open Info.plist file.

                    
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLSchemes</key>
            <array>
                < TODO Replace this value:>
                < Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID>
                <string>"Enter your REVERSED_CLIENT_ID"</string>
            </array>
        </dict>
    </array>
    
    

Apple SignIn:-

• Open your project in Xcode.
• Goto the Project Editor choose your target then Open the Signing & capabillitties panel
• Click the Library button (+) to open the Capabilities library (or choose Editor > Sign in with Apple).
• Then Run your Project.

Flutter Configuration

Setup AdMob

• For AdMob setup, you just need to change the app id, banner id and interstitial id.
• For that, you have to create a firebase account and create a new application in AdMob. and then create two ad unit.

1. Banner Ad

2. Interstitial Ad

• Refer Link
• Now come back to Application source code.
• Open lib/utils/AppConstants.dart file.
• And replace mAdMobAppId, mAdMobBannerId, mAdMobInterstitialId ids
• Now run the application. your ads are now live.

Change App Color

Please go to lib/utils/AppColors.dart file change value primaryColor at line no.3

Setup OneSignal

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

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.

• We have already added code for SDK and other configuration for oneSignal push notification. Open lib/utils/AppConstants.dart file and your OneSignal app ID.

For Android and iOS:-
Follow instruction for OneSignal Configure Here.

• Step 1. Locate the constant file (i.e. lib->utils->AppConstants.dart) file.
• Step 2. Find adminEmail and enter your admin email id you are using.
• Step 3. Restart the app.

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.

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



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

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.

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

• 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”.

• 5. Push your changes to server with below command

“git push” And provide you gitlab credential details


• 6. Check your all changes to gitlab server

---

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.

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

Now check the all changed file.

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

No matching client found for package name

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

Dependency Error

 Running "flutter pub upgrade" in chat...
The current Flutter SDK version is 1.17.5.
Because chat 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
chat 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 

flutter pub get

Unsupported gradle version 7.*.*

Unsupported Android Plugin version: 7.*.*

MeetMighty Help & Support

Change Log

Thank you for visiting

Designed with ♥ by MeetMighty