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

Project Structure & Features

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

PHP Setup

Requirements

• PHP >= 7.0 to PHP <= 8.0
• MySQL >= 5.6
• Apache HTTP server
• OpenSSL PHP Extension

Installation Instructions

• Unzip dowload file from codecanyon, Open web source code,Unzip the mightyweb.zip file and ONLY use the extracted /mightyweb 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 mightyweb.sql file in created database. ( Note : Only necessary for those client, who is setup project first time. )

Already imported mightyweb.sql

If you have already installed mightyweb.sql file than you need to install mightweb-alter-table.sql file ( Note : Not Necessary for those,who is setup project first time. )

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

Admin credentials

Email    : [email protected]
Password : admin

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

Change Application Name

• Follow the below step.

• Open /android/app/src/main/AndroidManifest.xml file 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 file.

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

• Important
• Make sure the package name of google-services.json file and applicationId both are same.

---

Deeplink

• Deeplinks are a concept that helps users navigate between the web and applications. They are basically URLs that navigate users directly to the particular content in applications.
  
  Set Deeplink

  Open /android/app/src/main/AndroidManifest.xml and set your data.

  
  <data
  android:host="[YOUR_HOST]"
  android:path="/[NAME][/NAME...]"
  android:scheme="[YOUR_SCHEME_OR_HTTPS]" />
  

  
  
  Host
  

  he host name identifies the host where resource is located. A hostname is a domain name assigned to a host computer. This is usually a combination of the host's local name with its parent domain's name. For example, www.google.com consists of host's machine name www and the domain name google.com.

  
  Path
  

  The path identifies the specific resource within the host that the user wants to access. For example, /search/flutter, /flutter/flutter-sdk-setup/, etc.

  
  Scheme
  

  The scheme identifies the protocol to be used to access the resource on the Internet. The scheme names followed by the three characters :// (a colon and two slashes). The most commonly used protocols are http://, https://, ftp://.

---

Generate Signed APK & AAB

• 1. Go to your project -> 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.


• 2. Open Project in New Window
• 3. Wait for while until project synchronization. After that Go to Build -> GenerateSigned Bundle/APK...




• 4. Select Android App Bundle or APK Option as per your need. (Android App Bundle is best solution) and click Next button.




• 5. Select Create new.. option to generate new Signed key (When you release your app First Time) and Fill all options. Refer this link




• 6. Click Next button and you will get following screen...




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

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

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";
                        

How to get Base URL

Open your Admin login page and copy the URL.

Without PHP Backend

Note: First you have to register your purchasecode at MightyWeb

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

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';
    

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>
    
    

Setup Firebase

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>
    
    

Deeplink

How to add URL Schemes in your project.

For add URL Scheme please follow below steps:

• Open Project in XCode.
• Select the runner in project navigator.
• Select the Runner in TARGETS.
• Then Select info tab.
• Scroll down and in URL Types selection added the URL Scheme and add the your identifier.

PHP Admin Panel Configuration

App Configuration

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

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

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

Select your app language

Select the App logo which will display in your app

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

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)

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

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

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

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

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.

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.

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

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.

Admob Configuration

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.

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.

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

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

Progressbar Style

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

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.

About App Configuration

If you want About app screen then enable it.

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

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

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

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

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

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

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

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

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

Sidedrawer Style

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

You can add / edit / delete Sidedrawer menu.

Bottom Navigation Style

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

You can edit bottom navigation menu.

Tabs Style

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

You can edit the TabBar menu.

Header Navigation

Left Icon

Click Enable to select left header Icon

Right Icon

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

WalkThrough

WalkThrough is based on Support Walkthrough selection in App Configuration.

You can add / edit / delete Walkthrough item.

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.

OneSignal Configuration

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

Send Onesignal notification

Update JSON

Change Password

OneSignal Configuration

Create a OneSignal Account

• Create onesignal project in your account and click setup platform redirect in settings->platforms-> Choose android platform


• After choose platform -> android configration, Generate json file and follow below link for how to generate JSON file

Click here



• Choose Target SDK as Flutter and click Save & Continue


• Now copy App ID as shown below and click on Save & Continue to complete your setup


• In main directory goto the lib -> utils -> app_config.dart file and repalce the one signal at line number 21.


• Go to Setting -> Keys & IDs in OneSignal project and copy 'Rest API Key'


• You have connected android application to your Onesignal account successfully

How to change OneSignal Logo

1. You can genrate and download your onesignal logo to Click here
2. Add Downloaded that folder. Afte that open your project and replace the folder. Go to android -> app -> src -> main -> res folder

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:

Create a Campaign Message Properties::

Set message layout and message content and click on next

Target Your Message:

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

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

Conversion Events (Optional):

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

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.

Click on publish to pulish in app message

for more detail about In-App Message Documentation.

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

Unsupported gradle version 3.*.*

Database Import Error

Message: Unknown collation: 'utf8mb4_0900_ai_ci'

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

Your website is loading

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.

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



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

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

MeetMighty Help & Support

Change Log

Thank you for visiting

Designed with ♥ by MeetMighty