# Introduction Version: 4.2.3(Last Updated: 28-10-25) ### TravelHour - Flutter Travel App for Andorid & iOS with Admin Panel Build a travel guide app with impressive UI design & animations. > Product Details: > > Admin Panel: [https://admin-travel-app.web.app](https://admin-travel-app.web.app/) (Use **tester** as admin password for testing purpose) > > Android Demo: [Google Play](https://play.google.com/store/apps/details?id=com.mrblab.travel_hour) > > iOS Demo: [AppStore](https://apps.apple.com/us/app/travel-hour/id1535904378) # Changelogs Travelhour is constantly being updated with new features, bug fixes, and adjustments. Below is a full listing of change log information. ## Version: 4.2.3 > 28 October 2025 > > ``` > - Compatible with flutter latest version 3.35.6 [app and admin] > - Added support for 16 KB memory page size requiremnts for Google Play Store [app] > ``` ## Version: 4.2.2 > 05 May 2025 > > ``` > - Compatible with flutter latest version 3.32.0 [app and admin] > ``` ## Version: 4.2.1 > 21 November 2024 > > ``` > - Compatible with flutter latest version 3.24.5 [app and admin] > ``` ## Version: 4.2.0 > 01 September 2024 > > ``` > - Compatible with flutter latest version 3.24.x [app and admin] > - Updated packages and depricated issues. > - Updated FCM notification with new http method [Follow Admin Setup - 3.4] > ``` ## Version: 4.1.3(hotfix-1) > 05 Nov 2023 > > ``` > - Fixed borderRadius issue which causing failer to run the app > ``` > Changed Files (App) > > ``` > - pubspec.yaml > - lib/pages/intro.dart > - lib/pages/place_details.dart > ``` ## Version: 4.1.3(hotfix) > 25 May 2023 > > ``` > - Updated with flutter latest version 3.10.x (Both app and admin) > ``` ## Version: 4.1.3 > 08 February 2023 > > ``` > - Updated with flutter latest version 3.7.x (Both app and admin) > - Fix Android 13 notification issues > - Fix iOS notification permission issues > - New online documentation > ``` # Getting Started Welcome to the TravelHour Configuration Document. This is the installation doc for both admin and app. You can build the admin panel and app (Android & iOS) by following this doc. So, You will get two source code files. One is for the Admin Panel and the other one is for the App. Both are developed on the flutter framework. So, You need to install flutter on your computer first to set up both. You need to follow the admin panel setup first and then go for the app setup. {% hint style="info" %} Note: We provide installation/reskin service for the TravelHour app. If you can’t do the installation by yourself, we can do that for you. You can check out our [Installation Plans](https://www.mrb-lab.com/installation-plans/travelhour) for more details. {% endhint %} # 1. Flutter Installation The complete application (both admin & app) has been developed & built on Flutter. First, You have to install flutter on your computer. You can use Both Visual Studio Code & Android Studio as IDE for Flutter. The steps are the same for both IDE. We have used Visual Studio Code. So, Our Setup will be based on this IDE. > To install flutter on your computer, follow the official documentation from Google. Flutter Official Site: . You can follow these youtube videos to install flutter also. > * For Mac: > * For Windows: {% hint style="warning" %} **The recommended compatible Flutter version is 3.32.0** {% endhint %} {% hint style="info" %} Note: A Mac (Apple Desktop/laptop) device and an apple developer account are required for the iOS setup. If you don’t have both of them, you can ignore the iOS steps. {% endhint %} # 2. Code Setup After purchasing the app you will get a .zip file. Unzip it. Inside the **main\_files** folder, you will get a folder named **admin**. This is the source code of the admin app. You have to work on this to set up your admin panel. Now open your IDE(Android Studio/VSCode) and open the **admin** folder on your IDE. Wait some time to load the project. Now go to the IDE terminal and run the following commands one after one : After that, run the following command below: ``` flutter clean ``` ``` flutter pub get ```
{% hint style="info" %} Make sure these commands should be run from the root directory of the code. {% endhint %} These commands will clean the project and get the required packages. Wait some time to get all the packages. # 3. Firebase Setup We have used the Firestore Database from Google as the backend for this project. * First, Go to the [Firebase Console](https://firebase.google.com/) and sign in with your email account and go to the console. * Create a project by your app name. And go to the project overview.
* Click on the **plus icon** and then click on the **web icon**. You will see a popup like the second picture below:
* Input the name as **Admin Panel** and fill in the checkbox because you need hosting too and then click on register app. After that, Skip the other options by clicking next. (Don’t input a custom name for hosting else you need extra setup for this which is not recommended) * Now go to **Project Settings**. At the bottom, Select the **Admin Panel** and copy the selected lines shown in the picture below:
* Now, go to your IDE and open the **lib/firebase\_option.dart** file and paste the line there.
That's it. # 3.1 Firestore Database Setup Follow the steps below: * From your firebase console, click on the **Firestore Database** and then click on the create database button.
* Now select the production mode and click on **Next > Enable**. # 3.2 Database Security Rules * From the Firestore Database, Click on the **Rules** tab and copy and paste the following code below: {% code title="Firestore Security Rules" %} ```firestore-security-rules rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write; } } } ``` {% endcode %} * Click on Publish button to publish the security rules. That's it. {% hint style="info" %} You should write your own security rules for the database {% endhint %} # 3.3 Database Index Setup From the Firestore Database, Click on the **Indexes** tab and click on the **Add Index**. You have to create two indexes for the database. > * Enter **places** as Collection ID, **state** into the first field and set **Ascending**, Enter **loves** in the second field and set **Descending** and then select **Collection** as query scope. > > * Enter **places** as Collection ID, **state** into the first field and set **Ascending**, Enter **timestamp** in the second field and set **Descending** and then select **Collection** as query scope. This may take 3-5 minutes to activate. After completing this, your index page should look like this
# 3.4 Push Notification Setup * From your Firebase console, go to the **Project Settings > Service Accounts** Tab. You need to download your service account information. * **Firebase Admin SDK > Node.js > Generate new private key** and a JSON file will be downloaded. * Open that JSON file in any text editor and copy the information inside the **{}** curly bracket.
* Now go to your IDE and open **lib/configs/fcm\_config.dart** the file and paste the text you have just copied inside the curly bracket. That's it.
# 3.5 Firebase Storage Setup * From your firebase console, go to **Build>Storage** and then Click on **Get Started**, and then select start in production mode and **Next>Done**. * Now, go to the **Rules** tab and copy and paste the following code there. {% code title="Storage Security Rules" %} ```firestore-security-rules rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if request.auth != null; } } } ``` {% endcode %} 3\. Click on **Publish** to publish the rules. # 3.6 Admin Credentials Setup From your Firebase Console > Firestore Database, Create a **collection** as **admin** and create a document as **user type** and create a **textfield** as **admin password** and use your password as value. Just like the picture below (Only the admin section). Try to use a unique password. This will be the password of your admin panel. You can change the password from here anytime. You can also change the password from your admin website.
# 4. Code Configs From your IDE, go to the **lib/config/config.dart** file. > 1. Change the App Name. > 2. To change the icon, First rename your icon to **icon.png** and make sure the icon is in .png format. Now drag & drop your icon to the **assets/images** folder and replace it with our icon. # 5. Upload to Firebase Hosting ## Install the firebase-tools CLI Skip this step if you already have firebase tools installed. If you do not have this, you must install that first. > npm download link: (Download and install it) {% hint style="info" %} If you are not sure whether `npm` is installed on your machine, run `$ npm -v` , and see if it lists a version number. If it does, then you already have `npm`. If it says “command not found”, you need to install it. {% endhint %} Once `npm` is installed, run the following command: ``` npm install -g firebase-tools ``` `firebase-tools` is now installed! ## Install the required command line tools * Log into Firebase using your Google account by running the following command: ``` firebase login ```
* Type Y and you will be redirected to your browser. * Follow the command prompt and the link in your browser. Accept the permissions by clicking **Ok**. When you return to your terminal you should see that you are now logged in. * Now you have to initialize the firebase. Run the following command: ``` firebase init ```
* Use the arrow keys to navigate the cursor to **Hosting** and hit the spacebar to select it, then press enter. Now you will see this screen:
* Select an existing project by pressing Enter. Use the arrow keys to select the project you have made in the firebase console. * Next, enter **build/web** as the public directory and press enter, then enter **y** (for yes) to select the single page app option. * Enter **n** (for no) to Set up automatic builds and deploys with the GitHub option.
## Build The Web App Run the following command to build the app for the web: ``` flutter build web --release ``` ## Upload to Hosting Run the following command to upload the admin app to the firebase hosting: ``` firebase deploy ```
After this command, you will get a **Hosting URL** from firebase which will be your **Admin URL**. # 6. Conclusion Hopefully, you have finished all of the steps and got an admin panel URL. You can now go to the URL and you will see a login page. After running the admin app, Use the password that you have saved in the database before and check if everything is okay or not. ### Before the App Setup (\*Required) You have to upload some states, places, and blogs before the app setup. Otherwise, the app will show nothing at all. In order to upload places, you have to upload some states/categories because places are dependent on the states/categories. {% hint style="info" %} Make sure you have uploaded at least 2 States, 1 Place & 1 Blog before the app setup. {% endhint %}
# 1. Introduction Make sure you have configured your admin panel first. If everything is okay, you can follow the further steps. You can use Android Studio or Visual Studio Code. {% hint style="danger" %} Make sure you have installed the latest version of flutter which was required to configure the admin panel. If not, please follow the **Flutter Installation** step from the Admin Setup. {% endhint %} {% hint style="info" %} Note: A Mac (Apple Desktop/laptop) device and an apple developer account are required for the iOS setup. If you don’t have both of them, you can ignore the iOS steps. {% endhint %} # 2. Code Setup Open the **source/​travel\_hour** folder on your IDE (VSCode or Android Studio) and wait some moments to load the project. > * Run the following command on the IDE terminal to clean the whole project first. > > ``` > flutter clean > ``` > > * Run the following command on the IDE terminal to get all the required packages. > > ``` > flutter pub get > ``` \ Now, your project is ready for configuration. # 3. Firebase Setup for Android # 3.1 Android Package Name Setup on Firebase * Go to the firebase console > Project overview page. Click on add app and then the A**ndroid** **Icon**. Enter your android package name.
{% hint style="info" %} Your package name should be like com.your\_name.your\_app\_name . Like **com.microsoft.skype**. You can use the same package name for android & iOS. iOS doesn’t support under space in the package name. So, keep in mind that if you want to use the same package name for both android & iOS. {% endhint %} * Click on the register app and skip other steps by clicking next. That’s it. # 3.2 Change Package Name Android {% hint style="info" %} Now, you have to change the package name in the source code. You have to use the same package name that you have registered in the firebase console. {% endhint %} * Go to your IDE and now you have to change the package name of your app. Run the following command from your IDE terminal by changing the package name with yours. ``` flutter pub run change_app_package_name:main com.new.package.name ``` {% hint style="info" %} Don’t forget to replace **com.new\.package.name** with your package name. {% endhint %} That’s it. Your android package name setup is complete.
# 3.3 Generate Debug Certificate {% hint style="info" %} You need to generate 2​ signing certificates​ for the google sign-in feature. Debug certificate is required for testing purposes. If you want to test google signing during development, then you should follow the steps. Otherwise, you can ignore it. {% endhint %} * To generate a debug certificate, run this command on your terminal from your app root directory. {% tabs %} {% tab title="Mac" %} ``` keytool -list -v \ -alias androiddebugkey -keystore ~/.android/debug.keystore ``` {% endtab %} {% tab title="Windows" %} ``` keytool -list -v \ -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore ``` {% endtab %} {% endtabs %} {% hint style="info" %} If this command doesn’t work, then go to this [link](https://developers.google.com/android/guides/client-auth) and copy the debug command from there according to your os. {% endhint %} * Use ​**android** as a debug password when the terminal asks for a password.
* Copy the **SHA1** certificate code and go to **Firebase Console > Your Project > Project Settings** and click on the android icon and then add the **SHA1** code by clicking ​**add fingerprint​** button. Look at the picture below:
# 3.4 Generate Release Certificate To generate a release certificate, You have to generate a Keystore file. To generate a Keystore file, run this command below from the root of your project directory. {% tabs %} {% tab title="Mac" %} ``` keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key ``` {% endtab %} {% tab title="WIndows" %} ``` keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key ``` {% endtab %} {% endtabs %} * Enter your details and remember the **password**. After this, you will get a **key.jks** Keystore file. * Locate this file and move the file into the **android/app** folder and copy the **path** by right-clicking on the key.jks file. * Then go to the **android/key.properties**​ file and replace the **path** of your Keystore file. Then also replace the ​**password​** which you have inputted to generate the Keystore file.
Now you can generate a release certificate, To do that, * Run with replacing your **alias\_name** and **keystore\_location**. ``` keytool -list -v -keystore keystore_location -alias alias_name ``` {% hint style="info" %} Your alias\_name is **key** and keystore\_location is the path(directory) of the **key.jks** file. {% endhint %} * After that, you will get a **SHA1** code. Copy that code and add it to your **Firebase Console > Project Settings > Android**, where you previously added a debug SHA1 code.
# 3.5 Google Sign In Setup for Android * Go to firebase console>your project>authentication>Sign-in-method and enable both **email/password** and **google** and save it.
* You have to configure some stuff for google sign-in. Go to the Google Cloud Console. {% hint style="info" %} Google Cloud Console: {% endhint %} * Make sure you are signed in with the same account with which you have created the Firebase project. * Also, make sure that on the top-left corner, your project is selected for which you are filling this consent.
* Go to the Credentials → OAuth consent screen tab and start filling out the form. * Enter **Application name**, **Application logo** & **Support email**.
* In all these places, you have to enter the same link starting with **http\://** then your app domain name which I have marked with green below. * Then, scroll down and fill in the Application Homepage link, Application Privacy Policy link, and Application Terms of Services link.
* Click on Save. That's it. You have completed your google sign-in & email setup. # 3.6 Facebook Login Setup for Android * Now you have set up Facebook sign-in. To do that, Go to this ​[URL](https://developers.facebook.com/).​ * Go to My apps > Create App. * Enter the App name and email and go to the Dashboard tab.
> For the next step, you need to generate two hash ids. To do that, run the following commands on the terminal. 1. Scroll down on the right panel until you reach ‘Add a product’, select **Facebook Login** 2. You will be redirected to the quick start page. 3. Select **Android**. Skip 1 & 2. 4. Enter **your\_package\_name** in the package option and enter **your\_package\_name.MainActivity​** in the activity option. {% tabs %} {% tab title="Mac" %} ``` keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 ``` {% endtab %} {% tab title="WIndows" %} ``` keytool -exportcert -alias androiddebugkey -keystore "C:\Users\USERNAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64 ``` {% endtab %} {% endtabs %} 1. Use ​**android**​ as a debug password. After that, you will get a hash id like this.
1. For the **release hash id**, run the following command by replacing your **alias key** name and **Keystore location**. You can get these from your **a​ndroid/key.properties** ​file. ``` keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | openssl sha1 -binary | openssl base64 ``` 1. After that, you will get another **hash id**. Now, copy and paste them into the next steps of the Facebook developer site. Like this,
1. Skip all the steps by clicking next. 2. Now go to the settings tab & copy both the **app id** and **app secret key**. 3. Now go to firebase console > your project > authentication > Sign-in-method and click on Facebook, enable it and paste both **app id** and **app secret key** and save it. 4. Now go to ​**android/app/src/main/res/values/strings.xml** file​ and change the **facebook\_app\_id** and **facebook\_client\_token**.
{% hint style="info" %} You will get the **Facebook client token** from > Your\_app > Settings > Advance tab. {% endhint %} # 3.7 Additional Firebase Setup for Android Now, you have to connect the firebase with your code project. Follow the steps below: * Run the following command from your IDE terminal: ``` firebase login ``` {% hint style="info" %} After this command, you will get a link prompt to log in with the email account that you have used on firebase. Login with that by allowing the required criteria. {% endhint %} * Run the following command from your IDE terminal: ``` dart pub global activate flutterfire_cli ``` {% hint style="info" %} After this command, if you get an error like the picture below, then just copy that line and run that. {% endhint %} * Run the following command from your IDE terminal: ``` flutterfire configure ``` * Select Your App and Press Enter.
* Select Android and press Enter.
{% hint style="info" %} Use arrow keys & space to select/unselect {% endhint %} {% hint style="success" %} You can select both Android & iOS if you want to build for both. If you do that, you can ignore the **4.5** Step. {% endhint %} After this command, A **google-services.json** file in the android/app folder and A **firebase\_options.dart** file in the lib folder will be added. If you found them, your firebase configuration is successful. # 4. Firebase Setup for iOS # 4.1 iOS Package Name Setup on Firebase * Go to the firebase console > Project overview page. Click on add app and then the **iOS icon**. Enter your package name. You can use the same package name that you have used for android.
* Click on the register app and skip others by clicking next. * Now go to project settings and click on ios and download the **GoogleService-info.plist**​ file. * Then go to the **i​os/Runner** directory​ and paste the file here. * Now, Open the iOS folder on Xcode by right-clicking on the iOS folder from VSCode or Android Studio and go to the runner folder and move the **GoogleService-info.plist**​ file here. You will get a popup and click yes or confirm the popup message. * Now, open the ​**GoogleService-info.plist**​ file from your IDE or from Xcode and copy the **REVERSED\_CLIENT\_ID**. (See the picture below)​
* Go to the **i​os/Runner/Info.plist​** file and replace the **R​EVERSED\_CLIENT\_ID** here.
# 4.2 Change Package Name iOS * Go to the i​os/Runner/Info.plist​ file and replace the **CFBundleIdentifier value** with your **iOS package name**. (See the picture below)
# 4.3 Facebook Login Setup for iOS * Go to [Facebook Dev Site](https://developers.facebook.com/) again and navigate to your project and click facebook login > quick setup > ios icon. * Skip 1 & go to step 2. * Enter your **ios package name** in the **bundle ID** ​option & skip others by clicking next. * Now, go to the **ios/Runner/Info.plist** file and replace your **FacebookAppID, FacebookDisplayName**(Your App Name) & **FacebookClientToken.**
That’s it. Facebook login setup for iOS is complete. # 4.4 Apple Login Setup Only for iOS {% hint style="info" %} An paid apple developer account and Xcode app on your mac is required. {% endhint %} * From your IDE, Right click on the ios folder and click on open on Xcode and then go to runner > sign in & capability tab.
* Add Sign in with Apple. We already did this in the project. If this is not available in the project, do this by yourself. * Now go to your firebase console > your project > authentication page and enable the apple sign-in option. You don’t have to put anything in the text fields.
{% hint style="info" %} One more thing, when you configure Firebase push notification for iOS in the next step, make sure you also tik on the Sign In with Apple option in the identifier on the apple developer page. {% endhint %} # 4.5 Additional Firebase Setup for iOS Now, you have to connect the firebase with your code project. Follow the steps below: * Run the following command from your IDE terminal: ``` firebase login ``` {% hint style="info" %} After this command, you will get a link prompt to log in with the email account that you have used on firebase. Login with that by allowing the required criteria. {% endhint %} * Run the following command from your IDE terminal: ``` dart pub global activate flutterfire_cli ``` {% hint style="info" %} After this command, if you get an error like the picture below, then just copy that line and run that. {% endhint %} * Run the following command from your IDE terminal: ``` flutterfire configure ``` * Select Your App and Press Enter.
* Select iOS and press Enter.
{% hint style="info" %} Use arrow keys & space to select/unselect {% endhint %} After this command, Your iOS app information from firebase will be added in the **lib/firebase\_options.dart** file. If you found them, your firebase configuration is successful. # 5. Google Map Setup In this step, you need to get a Google Map API key from Google Cloud Console. This is required to set up Google Maps on the app and other related features. * First of all, go to this ​[URL](https://console.cloud.google.com/google/maps-apis/start).​ * Make sure you have selected your project.
* Go to the APIs tab and enable these (4) APIs. > 1. Directions API > 2. Places API > 3. Maps SDK for Android > 4. Maps SDK for iOS
* Click on the menu button (Top Left) and select **APIs & Services**. * Go to the **Credentials** Tabs and click create credential then click **API key**.
* Copy that **API key** and go to **​lib/config/config.dart** file​ and replace it with your google map API key. {% hint style="info" %} Most importantly, you have to add billing on your Google Cloud Console. If not, Google Map API key won’t work. {% endhint %} # 5.1 Google Map Android Setup Go to **a​ndroid/app/src/main/AndroidManifest.xml​** and specify your API key here.
# 5.2 Google Map iOS Setup Go to **ios/Runner/AppDelegate.swift**​ and specify your google map API key here.

# 6. Push Notification Setup # 6.1 Android Notification Setup {% hint style="info" %} For Android, You don’t have to do anything. We already integrated the procedures into the project. {% endhint %} # 6.2 iOS Notification Setup {% hint style="info" %} For iOS, Go to this [link](https://firebase.flutter.dev/docs/messaging/apple-integration) and follow the instructions. This is a well-written doc from Flutter Team. You can ignore the (Advanced, Optional) step from there. {% endhint %} # 7. Multi-Language Setup {% hint style="success" %} You can skip this setup for now. This is not a mandatory setup to run this app. {% endhint %} So, we have used 3 languages in this app. English, Spanish & Arabic. {% hint style="info" %} You can add as many languages as you want. The multi-language feature is only for all of the static texts in the app. It's static and not related to the database. {% endhint %} {% hint style="info" %} English is the default & Starting Language. You can change the default language too if you want. {% endhint %} ## Editing An Existing Language If your language is already available on the list and you want to make some changes, then follow the steps below: Example: If your want to change some text in the Spanish language, then open the **assets/translations/es.json** file and edit only **right-side values**.
{% hint style="warning" %} Don't edit the keys (Left side values) {% endhint %} ## Adding A New Language If you want to add a new language that is not available in the default list, follow the steps below: * First, go to the **assets/translations** folder from your IDE. Add a .json file here with **your\_language\_code.json** name. Now go to the **assets/translations/en.json** file and copy everything from this file and paste to **your\_language\_code.json** file.
* Now, Rename the all right-side strings. Look at the **es.json** file and you will understand what to do. {% hint style="warning" %} Don't edit the keys (Left side values) {% endhint %} * Now go to **lib/main.dart** file and add your language code to **supportedLocals**.
Your code should look like this: ``` supportedLocales: [Locale('en'), Locale('es'), Locale('your_language_code')], ``` * Now go to **lib/config/config.dart** file and add your Language name at the bottom of the list by adding a comma.
* Now go to **lib/widgets/language.dart** file and enable the disabled lines by removing slashes and rename **your\_language\_code** and **language\_name** that you added to the list.
* For Android, you don’t have to do anything. * For iOS, go to **ios/Runner/Info.plist** and add your language code in a string. Look at the picture below.
* Add **\your\_language\_code\** inside the array. That's it ## Removing An Existing Language To remove any language that is available in the list, please follow the steps below: > * Go to the **asset/translations** folder and delete the your\_language\_code.json file that you want. (You shouldn't delete the en.json file because this is the default language). > * Now go to **lib/main.dart** and remove the locale from the **supportedLocale** line. > * Go to **lib/widgets/language.dart** file and remove the **else if** section of language code that you want to delete. > * And finally go to **ios/Runner/Info.plist** and remove the string. That’s it. (Only for iOS) ## Start Locale Setup English ('en') is added as the start language of the app by default. If you want to add any other language as a Start Language then go to the **lib/main.dart** file and replace the **startLocale** and the **fallbackLocale** with your language code. That's it.
# 8. Ads Setup {% hint style="success" %} You can skip this setup for now and can configure it later. We have enabled AdMob ads by default with test ad unit ids. You can enable/disable ads from the admin panel. {% endhint %} We have added interstitial AdMob ads. You can also set how many times a user clicks to show an ad. By default, we have added **clicksCount** for 5 times. That means when a user goes to a screen and if the **clicksCount** is multiplied by 5, then an ad will be shown. Then means after 5,10,15...clicks an ad will be shown if the ads are loaded properly. We have applied ads to 5 screens. > * lib/pages/place\_details.dart, > * lib/pages/blog\_details.dart, > * lib/pages/guide.dart, > * lib/pages/hotel.dart, > * lib/pages/restaurant.dart That means ClickCount will be applied only for these 5 screens. To edit the clickCount times, go to **lib/config/ad\_config.dart** file and edit the amount.
{% hint style="danger" %} You can control ads from the admin panel. We have added an option to turn off/on ads at any time you want. Don’t enable ads on the admin panel if you are not enabled ads in the app. {% endhint %} {% hint style="warning" %} We have used Admob ads by default with test unit ids. To test the ads, you should test with the test unit ids. Before releasing the app for production, make sure you have changed the app ids and ad unit ids with yours. Admob is applied by default. So you don’t have to do anything before releasing. {% endhint %} # 8.1 Admob Setup for Android {% hint style="warning" %} Follow these steps only for production (release): {% endhint %} * From your AdMob account, create an app for android. You will get an **app id** for android. * Create one Interstitial Ad Unit. * Now, go to the **android/app/src/main/AndroidManifest.xml** file and change the AdMob app id(Android) with yours.
* Go to the **lib/config/ad\_config.dart** file and change the **appIdAndroid** & **admobInterstitialAdUnitIdAndroid** with your values.
{% hint style="info" %} Ignore the iOS ids if you don’t want to make the app for iOS. {% endhint %} # 8.2 Admob Setup for iOS {% hint style="danger" %} You shouldn't use the android values here. {% endhint %} {% hint style="warning" %} Follow these steps only for production (release): {% endhint %} * From your AdMob account, create an app for iOS. You will get an **app id** for iOS. * Create One Interstitial Ad Unit. * Now, go to the **ios/Runner/Info.plist** file and change the AdMob app(iOS) with yours.
* Go to the **lib/configs/ad\_config.dart** file and change the **appIdiOS** and **interstitialAdUnitIdiOS** with your values.
# 9. App Information Setup {% hint style="info" %} Go to the **l​ib/config/config.dart​** file and change the existing values with all of your details. {% endhint %}
> * Chnage the app name, country name. > * Support email > * iOS app ID (Only for iOS and you can ignore this for now) > * Other links {% hint style="info" %} iOS app id can be found from your Apple developer account > Appstore Connect > Your App > App Information page. (This is required to open your app on the AppStore app to provide ratings) {% endhint %} # 10. Change App Name for Android > Go to the **a​ndroid/app/src/main/AndroidManifest.xml​** file and Change your app name.

# 11. Change App Name for iOS > Go to the **i​os/Runner/Info.plist​** file and Change your app name.

# 12. Change App Icon > * Go to the **assets/images** and delete the default icon (i**con.png**). > * Now upload your app icon as png in the **assets/images** folder and rename it to **icon.png** > * Now run the following command on the terminal: ``` flutter pub get flutter pub run flutter_launcher_icons:main ``` This command will create an android & iOS icons for your app. {% hint style="info" %} That’s it. For more info, visit this [site](https://pub.dev/packages/flutter_launcher_icons#-readme-tab-). {% endhint %} # 13. Change Splash Icon To change the splash icon, you have to upload your own splash icon. The icon should be in the .png format and make sure you have renamed it to **splash.png**. Go to the **lib/assets/images** folder and drop the icon here and replace it with our icon. That’s it. # 14. Change App Theme Color Go to the **lib/config/config.dart** file and edit the appThemeColor. We have You can use any color and the changes will happen in the whole app.
# 15. Run The App {% hint style="warning" %} Before doing that, Please make sure that you have followed all of the previpus steps. Otherwise, it won't work. {% endhint %} {% hint style="info" %} Before doing this, connect An Android Emulator from Android Studio or A Real Android device or An iOS Simulator from Xcode, or An real iOS device. {% endhint %} Before running the app, clean the project & get the packages by running the following commands one after one: ``` flutter clean ``` ``` flutter pub get ``` And finally, run the following command to run the app: ``` flutter run ``` # 16. Releasing the Android App at Google Play Store {% hint style="info" %} Make sure that you have done all the things that are required for the android release. {% endhint %} To test the released android app, run the following command on the terminal: ``` flutter build apk --split-per-abi ``` You will get 3 apk files from the **build/app/output/apk/release** folder. You can test the **app-armeabi-v7a-release.apk** file on your android device. {% hint style="warning" %} If you want to publish the app in the google play store, don’t upload any of the following apk files. Use an **appbundle** file which is recommended by Google {% endhint %} To generate an appbundle, run the following command on the terminal: ``` flutter build appbundle ``` After that, you will get a .aab file in the **build/app/output/appbundle/release** folder. {% hint style="success" %} Now you can upload this .aab file to the google play store. {% endhint %}
# 17. Releasing the iOS App at Apple AppStore {% hint style="info" %} Make sure that you have done all the things that are required for the ios release. {% endhint %} {% hint style="success" %} Follow the official doc from the flutter team [here](https://flutter.dev/docs/deployment/ios). {% endhint %}