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

3. Change package name

1. If you are using Android Studio, press Ctrl + Shift + R and if you are using VS Code, press Ctrl + Shift + F to replace the old package name with the new one throughout the entire codebase.
2. 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.
   

3. When You are changing package name the you also need change name of folders according to your package name in(android\app\src\main\kotlin) location in project. For Example if Package name is"com.wrteam.webviewprime" Then inside kotlin folder folder stucture are (com\wrteam\webviewprime) now this folder structure will change as per your package name if your package name is "wrteam.primeweb.webviewprime"then new folder structure is wrteam\primeweb\webviewprime. for change name of this folders just open your project folder navigate inside the kotlin folder just rename the folders according to your package name . Note : (Sometime you got issue dou to this reason.)

   
4. Some Doubt regarding package name change

   1. what if my package name is like this com.primeweb.webviewprime.view, so how can i make folder structure ?
   Ans. => in this situation you have to add one folder according to your package name , now you have 4 folder insode the kotlin folder like this \com\primeweb\webviewprime\view\

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.

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 Change server url

How to set Dual Website URL

1. The first is for the Primary URL to set the primary website URL.

2. The second is for the Secondary URL to set the secondary website URL.

3. The third option is to set the title of the first icon in the Bottom Navigation as described below.

4. The fourth option is to set the title of the second icon in the Bottom Navigation as described below.

Note: If the Dual Website button is turned off, the bottom navigation bar will not be shown. Instead, a floating action button will be displayed, and the URL specified in the Website URL field in the admin panel will be shown on the home page.

How to set your website URL

To configure the URL for your website (displayed on the home page), paste your URL into the "Website URL" Make sure to use the proper URL format, starting with either 'http://' or 'https://'.

Note: This URL will only be displayed on the app's home screen when the Dual Website button is turned off.

How to change Loader Color

How to change Share App Message

How to Turn on/off Pull to Refresh

How to Turn on/off Exit Popup Screen

How to Turn on/off Ads

How to Hide Footer

How to Hide Header

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 Onboarding Screen:

If you want to display the Onboarding Screen when the user opens the app for the first time, set the Onboarding Screen option to "Active" If you do not want to display the Onboarding Screen, set the option to "Inactive"

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 Add Onboarding Screen Elements:

Click the "Add Onboarding" button to add Onboarding Screen elements.

To Add Onboarding Screen Titles:

To Add Onboarding Screen Descriptions:

How to Change Onboarding Screen Style

In the Onboarding section, under the Onboarding Style option, you can select the style you prefer.

How to Change Ad IDs:

In the Ads Setup option, enter the iOS and Android Ad IDs in the text fields.

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, Contact Us, Privacy Policy, and Terms & Conditions Pages:

In the Settings option, you can edit the About Us, Contact Us, Privacy Policy, and Terms & Conditions pages.

How to Turn On/Off Force Update

In the Settings under the App Settings option, use the Force Update button to enable or disable forced updates.

For example, if your current Android and iOS versions are 1.0.1+1 and you update to version 1.0.1+2, enter the latest version in the Android App Version and iOS App Version fields. Then, enable the Force Update button to ensure this functionality works properly.

How to Add Android/IOS App Link

In the Settings under the App Settings option, use the Android App Link field to add the Android app link, and use the iOS App Link field to add the iOS app link.

How to Turn On/Off App Maintenance Mode

In the Settings under the App Settings option, use the App Maintenance Mode button to enable or disable Maintenance Mode.

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.

Generate Release APKs

Create and Add Key Store File for Android

1. First, verify whether the release is already specified in the build.gradle file. If it is not, set the release.

   
2. To generate a keystore file, run the following command:
   
   keytool -genkey -v -keystore your-keystore-file.jks -keyalg RSA -keysize 2048 -validity 10000 -alias your-alias
   
   

   You can replace "your-keystore-file.jks" with your preferred filename, but ensure you keep the ".jks" extension. Similarly, you can change "your-alias" as needed, but make sure to remember it. During this process, you will be prompted to set a password; please note that the password characters won't be visible on the screen.

   Additional information may be requested, but you can simply press Enter to skip those as they are optional fields.

3. Create a file named "key.properties" in your project's "android" folder and add the following details, which correspond to the information you used in the previous step:

storePassword=[your-password-from-previous-step]
keyPassword=[your-password-from-previous-step]
keyAlias=[your-alias-from-previous-step]
storeFile=[your-keystore-file-location]
   
   

   Replace the placeholders ("[]" brackets) with the actual details you used. Once these two steps are completed, you can generate either an APK file using the following command:

   flutter build apk
   
   

   Or an app bundle file for the Play Store upload with:

   flutter build appbundle

Follow these links for more information on generateing the release version:

1. To generate release android app-bundle and publish to playstore follow https://flutter.dev/docs/deployment/android

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.