Introduction to MightyUIKit

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.

A Hello, World program in Flutter looks like this:

import 'package:flutter/material.dart';

void main() => runApp(HelloWorldApp());

class HelloWorldApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {

    //MaterialApp acts as a wrapper to the app and 
    //provides many features like title, home, theme etc   
    return MaterialApp(
        title: 'Hello World App',

        //Scaffold acts as a binder that binds the appBar,
        //bottom nav bar and other UI components at their places     
        home: Scaffold(

            //AppBar() widget automatically creates a material app bar
            appBar: AppBar(title: Text('Hello World App')),

            //Center widget aligns the child in center
            body: Center(child: Text('Hello World')),
        ),
    );
  }
}
                    
                

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.

Important

Note that you have to close and reopen any existing console windows for these changes to take effect.

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

Important

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.

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

Important

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.

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:

Verify that the flutter command is available by running:

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

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

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, 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/main/utils/AppConstants.dart file.
• And replace AdsId, BannerId, InterstitialId ids
• 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

Important:

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

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.

Flutter Configuration

Create a OneSignal Account

Follow below steps

• 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

Configure OneSignal on App

We have already added code for SDK and other configuration for oneSignal push notification. Then open Constant.dart file under lib/main/utils/AppConstants.dart folder and change your ONESIGNAL_ID app ID.

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

Setup API Keys for Razorpay

• API key is a combination of the key_id and key_secret and is required to make any API request to Razorpay. You also have to implement the API key in your code as part of your integration process.

1. Log into your Dashboard. Dashboard with appropriate credentials.

2. Select the mode (Test or Live) for which you want to generate the API key.

• Note:
  • You have to generate separate API Keys for the test and live modes. No real money is used in test mode.

3. Navigate to Settings → API Keys → Generate Key to generate key for the selected mode.

• Refer Link


Picture curteosy : RazorPay

• Note:
  • After generating the keys from the Dashboard, download and save them securely. If you do not remember your API Keys, you need to re-generate it from the Dashboard and replace it wherever required.
• Warning:
  • Do not share your API Key secret with anyone or on any public platforms. This can pose security threats for your Razorpay account.

Setup API Keys for Stripe

Manage your API keys to authenticate requests with Stripe.

• Stripe authenticates your API requests using your account’s API keys. If you do not include your key when making an API request, or use one that is incorrect or outdated, Stripe returns an error.
• Every account is provided with separate keys for testing and for running live transactions. All API requests exist in either test or live mode, and objects-customers, plans, coupons, and so forth—in one mode cannot be manipulated by objects in the other.
• There are also two types of API keys: publishable and secret.
• Publishable API keys are meant solely to identify your account with Stripe, they aren’t secret. In other words, they can safely be published in places like your Stripe.js JavaScript code, or in an Android or iPhone app.
• Secret API keys should be kept confidential and only stored on your own servers. Your account’s secret API key can perform any API request to Stripe without restriction.
Obtaining your API keys
• Your API keys are always available in the Dashboard. For your convenience, your test API keys for your account are:
• Stripe automatically populates code examples in our documentation with your test API keys while you are logged in—only you can see these values.
• If you don’t have an administrator or developer role, you may not have access to view your API keys in the Dashboard. Contact your Stripe account’s owner and ask to be added to their team as a developer.
Alert:
• only your test API keys for testing and development. This ensures that you don’t accidentally modify your live customers or charges.
Test and live modes:
• In test mode, payments are not processed by card networks or payment providers, and only our test payment information can be used.
• Some payment methods using Sources have a more nuanced flow in live mode, with more steps required than those in test mode.
• Disputes also have a more nuanced flow in live mode, and a simpler testing process.
• Webhooks that were not successfully acknowledged are retried three times over a few hours (as opposed to 72 hours for live mode).

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 mighty_ui_kit...
The current Flutter SDK version is 1.17.5.
Because mighty_ui_kit 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
mighty_ui_kit 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

Meet Mighty Help & Support

Change Log

Thank you for purchasing our application