This guide will get you started with the setup of the application on your local machine.
Now that you have set up your server, it’s time to set up the mobile application to consume the data from your website. This guide will help you to connect the application with your server.
CAUTION
Please make sure that you follow the steps mentioned in this section very carefully. If you miss some steps it may lead to unwanted behavior or errors.
Before you can start testing your application, you will need to install Flutter on your machine.
TIP
Please install Flutter version 3.3 to avoid any dependency issues.
Setting up an Android Emulator or an iOS Simulator which will run your application on your local machine is part of the flutter installation.
After you’ve installed flutter then please follow the steps from the following link to setup your dev machine: https://flutter.dev/docs/get-started/install
INFO
Please make sure that you follow each and every step that is mentioned in the flutter installation guide properly.
Follow the installation steps based on your OS that you are using. You can skip setting up a real device and web setup in the flutter installation steps.
The recommended editor is Android Studio. Follow the guide from the link to setup an editor: https://flutter.dev/docs/get-started/editor
After you’ve followed through all the steps from the Flutter installation guide above, you need to check your installation for any issues that might cause some problem. You can do this by following the command below:
flutter doctor
Expected Result
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.0, on macOS 12.1 21C52 darwin-x64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.70.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability
• No issues found!
Note that the summary above has all tick marks. If you see a cross (X) in-front of an option then follow the steps mentioned below that option to complete your installation.
If you see [!] No Connected device (0 available) do not worry, you will open an iOS Simulator or an Android Emulator later in the setup process which will resolve this.
Now your development machine is setup. We will follow to the next steps of modifying App for your unique values.
Once you installed Android Studio on your machine, you can start changing the required files for Pro Web from android studio by following this guide.
To modify the required settings for your Pro Web application, you need to open it in Android Studio. Follow the steps below to open the application in android studio.
- Open Android Studio on your machine.
- From the Welcome to Android Studio screen, click on Open an existing project
- Choose the pro_web directory and open it. It is located at download package –> mobile-application –> pro_web. This will open the application source code in android studio.
- Open Terminal from the top menu bar in View –> Tool Windows –> Terminal. This will open a terminal in android studio. You will see it at the bottom.
- The Terminal will be open at the bottom in the root folder of the application. You will need to perform all the terminal related actions from this root folder in the terminal.
Now you are ready to make the necessary changes in the application files by following the guide below.
In the terminal you opened in the previous step enter the following command and press enter.
flutter pub get
This will get the dependencies for the application.
INFO
Make sure that you are connected to the internet while performing this task
All the application published on the App Apps must have a unique Bundle Id and App Name. In this step you will change the application’s display name and bundle Id.
Bundle ID:
It is a unique name given to every application which helps app Apps to distinguish between different applications. A bundle Id is conventionally in the form of a reverse website url. Rename your app bundle Id only in this manner.
For example: “com.codeappzwoo.codeappz”.
App Name:
The name displayed on the mobile phone below the app icon. It can be any name like "Code AppZ"
.
You need to change both of these before building and uploading your application to the app Apps by following the steps below.
- Run the following command
flutter pub global activate rename
This will install the “Rename” package to use on your machine.
- Change for ANDROID
flutter pub global run rename setAppName --targets android --value "App Name"
flutter pub global run rename setBundleId --targets android --value "com.example.android.app"
Replace the bundle Id “com.example.android.app” with your own name in the same format. For example: “com.codeappzwoo.codeappz”
Replace the app name” App Name” with your own name in the same format. For example: My App
- Change for IOS
flutter pub global run rename setAppName --targets ios --value "App Name"
flutter pub global run rename setBundleId --targets ios --value "com.example.ios.app"
Replace the bundle Id “com.example.android.app” with your own name in the same format. For example: “com.example.android.app”
Replace the app name “App Name” with your own name in the same format. For example: My App
Please save these package names as they will be used in the application configuration later.
Next we will setup the Firebase project for your application.
In this section we will see how we can change the app’s launcher icon.
To change the app launcher icon, you need to have an icon to replace it with.
- Dimensions:
1080*1080 px
- Format: png
To change the default icon for your application, follow the steps given below:
Rename the new icon image to app_icon.png
Replace / Place the icon created with the already present in the following path: codeappz / assets / images / app_icon.png
Follow this step below based on the format of your icon image:
- Open the `pubspec.yaml` file in android studio. This file is located in `pro_web / pubspec.yaml`.
- Scroll down to the section which resembles the following:
“`yaml
flutter_icons:
android: true
ios: true
image_path: “assets/images/app_icon.png”
“` Now `Save` the file by pressing `command + s` on Mac and `control + s` on Windows.
In the “terminal” run the following commands from the root folder:
flutter pub get
flutter pub run flutter_launcher_icons:main
This will generate the launcher icons for your application for both android and iOS.
For the notification icon, the size needs to be smaller for better performance.
Recommended size for notification icon is 48*48 px or 72*72 px.
Add the new notification icon to “codeappz / android / app / src / main / res / drawable / app_icon.png”. Replace the default icon with your new notification icon.
Usually the notification icons are png images in white color.
In this section we will setup the Firebase Project and connect it with the application for both Android and iOS.
Please follow the steps properly to avoid any issues.
Before you create a Firebase project you will need a Gmail account so please create one if you do not already have.
In this section you will create your Firebase Project by following the steps below.
Go to Firebase Console
Click on Add Project
3. Add a Name for your project and click Continue. You can use any name that you want
4. Click on Continue for Google Analytics for your Firebase project step.
5. Choose or create a Google Analytics account and click on Create Project.
6. Once the project is ready, click on Continue.
7. Once complete your dashboard will look like the following:
Now we will create an android application in our Firebase Project and connect it with WooStore Pro. Follow the steps below.
Under section Get started by adding Firebase to your app click on Android icon
2. Add Android Package Name and App nickname to the fields and click on Register App
INFO
Make sure that your Android Package Name is the same as you used while renaming the Bundle Id in the previous section here.
You can leave Debug signing certificate SHA-1 field empty for now. We will add it later on in the setup.
3. Download the Config file and place it inside woostore_pro –> android –> app –> google-services.json. You can replace any file which is already there.
4. Click Next on all remaining steps and finally click on Continue to console.
Now we will create an iOS application in our Firebase Project and connect it with WooStore Pro. Follow the steps below.
On your Firebase Dashboard click on Add App and then select iOS Icon.
2. Add iOS Bundle Id and App nickname to the fields and click on Register App
INFO
Make sure that your iOS Bundle Id is the same as you used while renaming the Bundle Id in the previous section here.
You can add the App Store Id later on when you will publish the application on apple app store.
3. Download the Config file.
4. Open Xcode by clicking on the file Runner.xcodeproj. You can locate this file in woostore_pro –> ios –> Runner.xcodeproj.
5. Using Xcode, move the GoogleService-Info.plist file you just downloaded into the Runner/Runner directory of your Flutter app. A dialog will show up and ask you to select the targets, select the Runner
target.
After doing these you can close Xcode and head back to Firebase Console.
6. Click Next on all remaining steps and finally click on Continue to console.
Now your Firebase Setup is complete and you can follow to the next steps.
The application supports push push notification via FCM ( Firebase cloud messaging ).
There are some steps you need to perform for iOS push notifications to work. There are no further steps required for Android.
Please follow the steps mentioned in the Official Flutter Firebase Cloud Messaging Guide to setup the push notifications on iOS. You only need to follow the section Linking APNs with FCM
as all other are already done for you in the application.
Please follow the instructions mentioned in all the following Required steps:
All of these steps require you to have access to your Apple Developer account.
- Open the file
pro_web / lib / constants.dart
. - Edit the variable
websiteInitialUrl
to your url.
For example
const String websiteInitialUrl = 'https://www.codecanyon.net';
Make sure that the url is a valid url
- Open the file
pro_web / lib / colors.dart
. - Edit the variable
splashBackgroundColor
to your color value.
For example
const Color splashBackgroundColor = Color(0xFF204DA3);
Create a file with svg
format with the name splash_logo.svg
and add it to the assets folder inside root folder.
Set the following variables to true
or false
to either turn on or turn off the ads.
- Open the file
pro_web / lib / constants.dart
. - Edit the following variables to your values.
- Open the file
For example
const bool showInterstitialAds = true;
const bool showBannerAds = true;
You can also modify the tabs used in the application by adding or deleting the tab entries as shown below:
For example
List<Map<String, dynamic>> kTabs = [
{
‘tabName’: ‘Jio Saavn’,
‘icon’: Icons.circle_outlined,
‘url’: ‘https://www.jiosaavn.com/’,
},
{
‘tabName’: ‘Wiki’,
‘icon’: Icons.square_outlined,
‘url’: ‘https://en.wikipedia.org/wiki/Audio_(song)’,
},
{
‘tabName’: ‘Blogger’,
‘icon’: Icons.group_work_outlined,
‘url’: ‘https://www.blogger.com/’,
},
];
You can add another tab entry at as follows:
For example
List<Map<String, dynamic>> kTabs = [
...,
{
‘tabName’: ‘New Tab name’,
‘icon’: Icons.add,
‘url’: ‘https://my-web-url.com’,
},
];
- Open the file
pro_web / lib / constants.dart
. - Edit the following variables.
For example
const androidInterstitialAdId = 'ca-app-pub-XXXXXXXXXXXXXXXX/1033173712';
const iosInterstitialAdId = 'ca-app-pub-XXXXXXXXXXXXXXXX/4411468910';
- Go to
android/app/src/main/AndroidManifest.xml
and update adaccount id
on line 109.
For example
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-XXXXXXXXXXXXXXXX~3347511713"
- Go to
ios/Runner/Info.plist
and update adaccount id
on line 43
For example
GADApplicationIdentifier
- Go to
lib/constants.dart
and change values of variable you want to change according to your app
For example
const String aboutPageURL = 'https://example.com/about';
const String privacyPageURL = 'https://example.com/privacy';
const String termsPageURL = 'https://example.com/terms-and-conditions';
Please remove unnecessary permissions from
android\app\src\main\AndroidManifest.xml
file (e.g remove location permissions if your website don’t use location permission)Go to File option of your android studio. Click on ‘Open’ option, then locate your flutter project’s android module and open it. Now generate release apk from that new module.
3. Wait for build process to finish. If build finish successfully then, in Build
menu you will get option generate signed bundle/apk
.
- Choose
Android App Bundle
here
5. If you are creating apk for first time then click on Create New
for Keystore path (and save this file for future use). for subsequent version updates always choose existing keystore file Fill all required information and click next
From options, choose release
Open your Project’s Runner.xcworkspace file in Xcode, and Add your Team [Your Apple Developer ID] and also Insert GoogleService-Info.plist file [Downloaded From Firebase Project] inside folder named Runner.
Select Any iOS Device (armv7,arm64) as shown in image below
- After that Select Archive From Product Menu of Xcode as shown below
4. Once Build / Archive Generated, pop up window will be shown. Validate app First, and After successful Validation of App, You Can Distribute App to AppStore.
- After SuccessFull Submission of Build File, it will be Reflected to your Apple Developer Account in which we have created app with same Bundle ID