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.

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

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.