1. Setup Flutter

1. Unzip the file and place the Flutter folder in your preferred installation destination for the Flutter SDK (e.g., C:\flutter). Avoid installing Flutter in locations such as C:\Program Files .
2. Let's add Flutter to the environment path. Search 'environment' in the Start bar and select Edit the system environment variables.
3. Within the User variables section of the Path environment variable, proceed by selecting the "Edit" option. A new dialog box will appear; within this dialog, select "New" and then proceed to paste the path to your Flutter installation, specifically the \bin directory. Click OK on all the dialogs to close them.
4. Now to check if everything is installed correctly.
   Open the Command Prompt, and run flutter doctor

Explore the official Flutter website at https://docs.flutter.dev/get-started/install for a complete installation guide.
Prefer video tutorials? Check out the playlist:

2. Setup Android Studio

1. Launch Android Studio and navigate to the 'Open' option. From there, select the 'Prime Web' folder that you acquired from Codecanyon.
   Choose between 'prime_web_firebase' or 'prime_web_onesignal' based on your specific needs and preferences.
2. Now if you are first time creating/opening flutter project inside Android Studio then you will need to Install the flutter plugin, add flutter and dart sdk path.
   • Open File->Settings, then go to Plugins
   • And Install flutter, dart, and kotlin plugins
   • From left pane, open 'Language and Frameworks' and click on 'flutter', then on right panel set path of flutter.
   • Now dart sdk should automatically be selected, if not select flutter path and add \bin\cache\dart-sdk as shown in image.
3. Navigate to the SDK Manager located in the upper right corner. Subsequently, access the Android SDK section, unmark the 'Hide Obsolete Packages' option, and select 'Android SDK Command Line Tool Latest.' Proceed by applying the changes and clicking 'OK.'
   This action will initiate the download of the most recent version, as shown in the image below.

3. Change package name

1. Navigate to the Android panel and locate the small gear icon. Disable the Compact Empty Middle Packages option by unchecking or deselecting it.
2. Your package directory will be subdivided into separate directories.
3. Choose each directory to rename, then right-click, select Refactor, and choose Rename Current in the pop-up dialog.
4. Please input the updated name and select Refactor. Kindly allow a moment for Android Studio to process and implement all modifications.
5. Upon modifying 'com.wrteam.prime_web,' your directory should reflect the following structure (note that the new name provided is for illustrative purposes only). Please consider assigning a meaningful package name.
6. Press Ctrl + Shift + R to replace the old package name with your new one throughout the entire codebase.
7. For iOS, navigate to ios > Runner > info.plist. Locate the key CFBundleIdentifier, which derives its value from the 'PRODUCT_BUNDLE_IDENTIFIER' variable. Press Ctrl+Shift+F and search for 'PRODUCT_BUNDLE_IDENTIFIER,' then update its value at every instance. For instance, in this project, the iOS package name is 'com.wrteam.webviewprime,' so replace it with your designated package name.
   

4. Run Flutter Project

1. For first-time users, enable Dart support for the project. Afterward, navigate to the pubspec.yaml file and retrieve the packages by clicking on "Pub Get" located at the top right corner, as illustrated in the image.
2. After enabling Dart support and fetching packages, select a device or run an emulator. Click the 'Play' icon in the upper-right corner to launch the app. For physical devices, enable 'Developer Options' and 'USB Debugging' on your phone.
NOTE:
1) If you have executed the 'prime_web_firebase' app, ensure to set up Firebase and configure the 'google-services.json' file before running the app. Refer to the steps outlined in the section How to integrate Firebase.
2) If you've run the 'prime_web_onesignal' app, initially set up OneSignal by following the instructions provided in the section How to integrate OneSignal.
3. To run the iOS app, follow these steps in the terminal:
   1. Navigate to your project directory.
   2. Run the following commands:
      • flutter clean
      • flutter pub get
      • cd ios
      • pod install
   3. Once pods are installed successfully, return to Android Studio and run 'flutter run'.
   4. If you encounter errors during pod install, delete the .symlinks folder, Pods folder, and Podfile.lock file from the ios folder. Then repeat the above steps.

How to change application name

How to change application version

How to change application logo

For Android, open the directory android > app > src > main > res, and paste your logo in all mipmap folders corresponding to different device screen sizes.

For iOS, navigate to ios > Runner > Assets.xcassets > AppIcon.appiconset. Place your logo in this directory according to different sizes.

How to set your website URL

How to Turn on/off Ads

How to Change Bottom Navigation Bar

How to Add/Remove Tabs in Bottom Navigation Bar:

To Add a New Tab:

1. Add Lottie icons with light and dark brightness to the assets/icons folder.
   In lib/constants/icons.dart, use them as shown in the image.
2. Add the corresponding variable in the icons.dart file. Modify the navigationTabs list in the Constants file to add or remove tabs. You can use the following code as a template:

        {
            'url': '',
            'label': '',
            'icon': ''
        },
    

Note: The Settings tab will be added in the code, and you can't modify it from this list.

How to Show/Hide Header and Footer:

To show or hide the header and footer of your website, change the values of the following variables. Set to true if you want to hide it:

How to Show/Hide Splash & Onboarding Screen:

If you want to display the splash screen or onboarding screen at the app starting time, change this variable. Set to true if you want to show it:

How to Change Splash Logo and Color:

To Change Splash Logo:

1. Create a logo in 'svg' format.
2. Replace 'splash_logo.svg' in the 'icons' folder with your new SVG logo.

To Change Splash Background Gradient Colors:

Change the value of the variable as shown below:

How to Change Floating Action Button Color:

Open lib->provider->theme_provider.dart file and change the value of 'backgroundColor' in floatingActionButtonTheme (both in light and dark themes if required).

How to Change Onboarding Screen Elements:

To Change Onboarding Images:

1. Create images in 'svg' format.
2. Replace 'onboarding_a.svg', 'onboarding_b.svg', and 'onboarding_c.svg' in the 'icons' folder with your new SVG images.

To Change Onboarding Screen Titles:

Change the value of the below string variable as shown below, from lib>constants>strings.dart:

To Change Onboarding Screen Descriptions:

Change the value of the below string variable as shown below, from lib>constants>strings.dart:

How to Change Ad IDs:

To Change Ad IDs in Constants.dart:

Go to lib->constants->constants.dart and update the ad IDs as shown below:

After ? add the Android Ad Ids, and after : add the IOS Ad Ids.

For Android:

Go to android/app/src/main/AndroidManifest.xml and update the ad account ID as shown below:

For iOS:

Go to ios/Runner/Info.plist and update the ad account ID as shown below:

For more info, click here.

How to Change Application Colors:

To Add Your Colors:

Add your colors in lib->constants->colors.dart and do not change the color variable names.

To Change Colors Usage for Dark and Light Themes:

Change colors usage for dark and light themes in lib->provider->theme_provider.dart.

How to Change Application Font:

1. Add Your Font in assets/fonts:

Go to assets/fonts and add your font as shown in the image.

2. Add Font Details in pubspec.yaml:

Open pubspec.yaml file and add your font details as shown below:

3. Then Change Font Family Name in theme_provider.dart:

As per shown in the image, change the fontFamily name in theme_provider.dart file:

How to Change Application String Constants:

Go to lib->constants->strings.dart as shown in the image and change the values of the variables you want to change according to your app:

How to Change About Us, Privacy Policy, and Terms & Conditions Pages:

To Load Data from URL:

If you want to display these pages from a URL, change values as shown below:

To Display Pages from Text Resource:

Change content in variables as shown below. To display static content, set the value of urls as empty:

How to Set Up AdMob in App:

For Android:

1. Log in to your AdMob account on the AdMob website.
2. Navigate to the "Apps" section or a similar menu in the AdMob console.
3. Look for an option to "Add Android App" or a similar function.
4. Provide the necessary information about your Android app, such as the app name.
5. Enabling user metrics is not necessary to complete this codelab. However, it is recommended as it allows you to understand user behavior in more detail.
6. Click on the "ADD APP" button.
7. Follow any additional steps or prompts to complete the app addition process.

Note: The exact steps may vary slightly based on updates or changes to the AdMob interface. If you encounter any difficulties, check the official AdMob documentation or contact AdMob support for assistance.

Create Ad Units:

1. Select "Banner" ad unit, enter the banner unit ad name, then click on "Create Ad Unit" button.

2. Follow the same procedure to create "Interstitial" and "Open" ads.

For IOS, Follow the same steps as android to create unit ads.

How to Integrate Firebase:

Create Firebase Project:

1. Visit the Firebase Console and log in to your account.
2. Create a new Firebase project by clicking on the "Add Project" button.
3. Follow the steps as shown in the images below:

To Connect your Android app with Firebase:

1. Add an android app in firebase
2. Follow the steps mentioned in the firebase.
3. And add google-services.json file in project.

To Connect your IOS app with Firebase:

1. Add an IOS app in firebase
2. Follow the steps mentioned in the firebase.
3. And add GoogleServices-Info.plist file in project.

To Enable Notifications in IOS:

1. Go to your Firebase Console.
2. Navigate to "Project Settings" -> "Cloud Messaging" -> "Apple app configuration."
3. Upload your p8 Certificate here. (Follow this guide to generate p8 certificate)
4. Paste the Key ID and Team ID:
• The Key ID is the string behind AuthKey in the file name of your p8 certificate.
• For the Team ID, you can find it on your Apple developer account membership page.

How to Integrate OneSignal:

1. Create a OneSignal project in your OneSignal account and choose the Android platform.

2. Go to your Firebase Console -> Project Settings -> Cloud Messaging and copy the 'Server Key' and 'Sender ID.'

3. Paste those values one by one in your OneSignal project settings.

4. Choose the Target SDK as Flutter.

5. Copy the App ID from OneSignal.

6. Paste this App ID in your Flutter project at lib/constants/constants.dart. (Don't change variable names).

7. If you didn't copy the App ID earlier, you can retrieve the OneSignal App ID from your OneSignal project settings.

You have successfully connected your Android application to your OneSignal account.

Note: Follow the instructions carefully and ensure that you don't change the variable names when pasting values in your Flutter project.

How to Set OneSignal Notification Icon:

If you don't want to use the default bell icon in notifications, you need to generate icons specifically for notifications. with name ic_stat_onesignal_default.webp

And paste into each into folder according to their size.

For iOS:

1. Create a new app within your OneSignal account and select the iOS platform.

2. Upload the .p12 certificate, and you can refer to this guide for assistance here.

3. Choose Flutter as the SDK.

IMPORTANT: Ensure to replace the provided iOS Bundle ID 'com.wrteam.webviewprime' with your specific iOS Bundle ID throughout the project. Additionally, replace the existing Bundle ID in the OneSignal folder with your own.

How to Add Dynamic Link in App

Generate Release APKs

To generate a release bundle for Android in Android Studio, follow these steps:

1. Right-click on the 'android' module in your Flutter project.
2. Find the 'flutter' option and click on 'Open android module in Android Studio.'

3. If the Flutter option is disabled, go to the File menu in Android Studio, select 'Open,' locate your Flutter project's android module, and open it.

4. Generate the release APK from the newly opened module.

Wait for the build process to complete. Once finished, go to the Build menu, where you'll find the option 'Generate Signed Bundle/APK.'

Choose 'Android App Bundle' and, if it's your first time creating an APK, click on 'Create New' for the keystore path (remember to save this file for future use). For subsequent updates, always choose the existing keystore file.

Provide all required information and click 'Next.' From the options, select 'Release.'

Steps to Publish iOS App to App Store

To publish your iOS app on the App Store, follow these steps:

1. Open the Runner.xcworkspace file in Xcode.
2. Add your Team (Apple Developer ID) inside the Runner as shown in image.

3. Select any iOS device (armv7, arm64).

4. Choose "Archive" from the Product menu in Xcode.

5. Once the build/archive is generated, a popup window will appear. Validate the app first, and after successful validation, you can distribute the app to the App Store.

After a successful submission, the build file will be reflected in your Apple Developer Account with the same Bundle ID. For detailed assistance, click here.