Introduction to Mighty Web


Create your own Mobile app of your Web Site within just a few minutes. It is extremely easy to understand, simply follow the documentation steps. Additionally, you would need no programming skills too. Choose from a beautiful collection of high quality UI design screens and you can also combine resourceful features. All you need is a mobile responsive website to create a web-view application and you're all set to launch your amazing mobile app with this bundle.

Prerequisite

Android Studio: Android Studio Flamingo | 2022.2.1

Flutter: 3.10.x

Project Structure & Features

Mighty Web project structure and short description for each of them is as follow:

  • assets: apps/widgets/snippets images, appIcon as well as App Configuration File are stored here.
  • lang: Multi-language support json file is 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.
    • 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.

Application Features

  • Easy Configuration
  • Multi File Upload
  • Single File Upload
  • Media Playback
  • Multiple Progress Style
  • Multiple Theme Style
  • GPS Support
  • Social Media Share
  • Html 5 game Support
  • Media Support
  • Communication Support
  • Custom Theme Support
  • Gradient Theme Support
  • Full Screen
  • Multi Language Support
  • Light/Night Mode Support
  • Network handle
  • One Signal Notification
  • Admob integration
  • Pull To Refresh
  • WebRTC Support
  • Deeplink Support
  • User-Agents
  • Customizable Splash Screen
  • In App Message Support
  • Dynamic Bottom Navigation with Multiple Style Support
  • Multiple Walkthrough(OnBaord) Support
  • Dynamic Tabbar with Style Support
  • Floating Action Button with Menu Style Support
  • Clear caches and cookies
  • Dynamic Exist Pop Up Support

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:

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



Step 1 : Get the Flutter SDK


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


Step 1 : Get the Flutter SDK

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!

PHP Setup


Requirements

Installation Instructions

logo

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

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

logo

Admin credentials


Email    : [email protected]
Password : admin

Getting Started (Build & Run)

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

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

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

Setup Firebase


Setup AdMob


Change Application Name


Change Application Icon

  • Warning
  • Application icon name must be ic_launcher

Change Application ID

Flutter 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

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";
                        
logo
How to get Base URL

Open your Admin login page and copy the URL.

logo

Without PHP Backend

Note: First you have to register your purchasecode at MightyWeblogo

Enter your purchasecode and sign in and add your app configurations.

logo

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

const PURCHASE_CODE = 'ADD YOUR PURCHASE CODE';
    
logo

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


Change Admob App Id

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

Setup Firebase

In iOS Integration


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>
    
    

Deeplink

How to add URL Schemes in your project.

For add URL Scheme please follow below steps:

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.

  • 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

Add a Firebase configuration file

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


PHP Admin Panel Configuration

App Configuration


First go to the Web App Configuration Form and fill details which you want for your app.

App Name

Set your application name.This name show in the toolbar on your application.

Base URL

Set your base URL with HTTPS or HTTP. This URL will load on your app home screen.

App Language

Select your app language

App Logo

Select the App logo which will display in your app

Navigation Style

Select your app Navigation Style. There are 4 navigation styles available. Choose one of them (Side drawer, Bottom Navigation, Full Screen, Tabs)

If you enable the Tabs option, It display the tab styles options. Select your tab style which you want

Header Style

Select the Header Style for title that will display in the header(AppBar). There are 3 header styles available. Choose one of them (Left,Center or Empty)

Javascript Enable?

This flag will enable the JavaScript option on the app. If you don't know about it just keep it the default selected value.

Required Splash Screen?

This flag will enable a splash screen on starting off your app. If you want to show it then only turn it on.

Support Zoom Functionality?

This flag will enable the zooming on the app. If you don't know about it just keep it the default selected value.

Required Walk Trough (onBoard)?

This flag will enable a onBoard screen on your app. If you want to show it then only turn it on.

Support WebRTC?

This flag will enable the real-time communication in the app. If you don't know about it just keep it the default selected value.

Enable Pull to Refresh

This flag will enable the pull to refresh option in the app. If you don't know about it just keep it the default selected value.

Clear cookie?

This flag will Clear the browser data. If you don't know about it just keep it the default selected value.

Support Floating Action Button?

This flag will enable the floating action button(FAB) in your app. If you don't know about it just keep it the default selected value.

If you enable this option,it displays the FAB logo and style options. Add your FAB logo and select Floating action Button style.

logo

Admob Configuration


AdMob Banner Unit ID-Android

This field is for showing AdMob banner ads on your app. If you don't want to show google AdMob just keep it blank. If you want AdMob then don't forget to add meta-data on your AndroidManifest file.

AdMob Interstitial Unit ID-Android

This field is for showing AdMob interstitial ads on your app. If you don't want to show google AdMob just keep it blank. If you want AdMob then don't forget to add meta-data on your AndroidManifest file.

AdMob Banner Unit ID-iOS

This field is for showing AdMob banner ads on your app. If you don't want to show AdMob just keep it blank.

AdMob Interstitial Unit ID-iOS

This field is for showing AdMob interstitial ads on your app. If you don't want to show AdMob just keep it blank.


logo

Progressbar Style


At the time of loading the website, this progress bar will be shown on your screen. Click here for progress bar style.


logo

Theme Style


Theme style is your app style. We have some pre-defined theme styles for you. If you want your own theme color then select the 'Custom Color Theme' / 'Gradient Color Theme' option and enter your color code below the field. Click here to check the Pre-build theme style.


logo

About App Configuration


Is Show About Option?

If you want About app screen then enable it.

Whatsapp number

This field is used to directly open whatsapp message screen for a chat. If you don't want just keep it blank.

Instagram URL

This field is used to directly open the Instagram account of your app. If you don't want just keep it blank.

Twitter URL

This field is used to directly open the Twitter account of your app. If you don't want just keep it blank.

Facebook URL

This field is used to directly open the Facebook account of your app. If you don't want just keep it blank.

Phone Number

This field is used to directly open Call screen for a call. If you don't want just keep it blank.

Snapchat

This field is used to directly open the Snapchat account of your app. If you don't want just keep it blank.

Skype

This field is used to directly open the Skype account of your app. If you don't want just keep it blank.

Messenger

This field is used to directly open the Messenger screen for a chat. If you don't want just keep it blank.

Youtube

This field is used to directly open the Youtube account of your app. If you don't want just keep it blank.


logo

Sidedrawer Style


Sidedrawer Style is based on Navigation Style selection in App Configuration.


logo

You can add / edit / delete Sidedrawer menu.


logo

Bottom Navigation Style


Bottom Navigation Style is based on Navigation Style selection in App Configuration.


logo

You can edit bottom navigation menu.


logo

Tabs Style


TabBar Style is based on Navigation Style selection in App Configuration.


logo

You can edit the TabBar menu.


logo

Header Navigation


Left Icon

Click Enable to select left header Icon


logo

Right Icon

Click Enable to select Right header Icon and Click Disable to unSelect Right Header Icon.


logo

WalkThrough


WalkThrough is based on Support Walkthrough selection in App Configuration.

You can add / edit / delete Walkthrough item.


logo

User Agent


A user agent is any software that retrieves and presents Web content for end users or is implemented using Web technologies.

You can add/edit or delete the User-Agents for both platforms.At a time, Only one User-Agents is enable.


logo

OneSignal Configuration


Set Onesignal app id and rest api key for Onesignal Configuration.


logo

Send Onesignal notification


logo

Update JSON


logo

Change Password


logo

OneSignal Configuration

Create a OneSignal Account


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

In-App Message Setup


Firebase In-App Messaging helps you engage your app's active users by sending them targeted, contextual messages that encourage them to use key app features. For example, you could send an in-app message to get users to subscribe, watch a video, complete a level, or buy an item. You can customize messages as cards, banners, modals, or images, and set up triggers so that they appear exactly when they'd benefit your users most.

Setup In-App firebase messaging follow below steps:

configure the project in firebase goto console select in-app Messaging

Create Campaign:
logo
Create a Campaign Message Properties::

Set message layout and message content and click on next

logo
Target Your Message:

You have to select the user to whom you want to message. click on next

logo
Message Scheduling:

Can set campaign start date and end date using message scheduling There are many more optional things in this, there is a limit on showing messages, etc. click on next

logo
Conversion Events (Optional):

Conversion Events This is kind of an optional field it allows to set the tag for click count.click on next

logo
Additional option (Optional):

Add customer data which is optional. click on review button to make any changes and once it is published the campaign will be started.

logo logo

Click on publish to pulish in app message

for more detail about In-App Message Documentation.

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

Unsupported gradle version 3.*.*


Message: Unsupported gradle version 3.*.*

Solution:

1. Open project_root_directory/android in Android Studio

2. Wait for indexing

3. Now run your application from android module

Database Import Error


Message: Unknown collation: 'utf8mb4_0900_ai_ci'

logo
Solution:

1. Open mightyweb.sql file

2. find the utf8mb4_0900_ai_ci in your database and replace the utf8mb4_0900_ai_ci to utf8mb4_general_ci save the file.

3. Now again import database

Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.15.


1. Open android -> build.gradle file

2. find the ext.kotlin_version = '1.5.31' and change to ext.kotlin_version = '1.4.32'

3. Click on File -> invalid Caches / Restart

logo

Your website is loading


There are multiple possibilities

1. If you have used PHP backend the click on the Update JSON button.

2. Please check your base URL which is available in the constant.dart file.

FAQ

Yes, You can use it without a PHP backend.

Change Log

Version 19.0 – 19 Jun 2023

20 May 2023

Version 18.0 – 23 Jan 2023

Version 17.0 – 10 Sep 2022

Version 16.0 – 27 jul 2022

Version 15.0 – 24 May 2022

Version 14.0 – 11 May 2022

Version 13.0 – 28 Mar 2022

Version 12.0 – 01 Mar 2022

Version 11.0 – 04 Jan 2022

Version 10.0 – 21 Dec 2021

Version 9.0 – 17 Dec 2021

Version 8.0 – 23 Nov 2021

Version 7.0 – 05 Oct 2021

Version 6.0 – 25 Jun 2021

Version 5.0 – 11 Jun 2021

Version 4.0 – 26 May 2021

Version 3.0 – 11 May 2021

Version 2.0 – 24 Apr 2021

Version 1.0 – 17 Apr 2021

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 maintain 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 on the 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 system. You can clone it with the command line.
  • 2. git clone “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 the 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.

  • 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 your 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 “total changed file” to see which file has been changed

logo

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 visiting

logo

Designed with ♥ by MeetMighty