“SchoolTripTrack Flutter Apps” Documentation

“Flutter Apps”

What is SchoolTripTrack?
Configuration
Android App
iOS App
FAQ

A) What is the SchoolTripTrack App? - top

SchoolTripTrack is a comprehensive multi-vendor school bus tracker system for managing the daily school bus operation that links the school, the guardians and the buses into one powerful system..

SchoolTripTrack consists of two Flutter apps for guardians and drivers along with an Admin panel with a Laravel API system as a back-end and a Vue.js front-end system as a web interface.

Here we present how you can generate both the Android and iOS mobile apps from the purchased source code.

B) Configuration - top

Firebase
- Go to Firebase Console and in Project settings, click on Add App
- Choose Android and enter the package name of the app. The package name can be found in the file android/app/build.gradle
- Download the google-services.json file and place it in the path "android/app"
- Edit the firebase_options file in lib/firebase_options.dart by your changing the FirebaseOptions by yours that can be obtained from the downloaded google-services.json file
- Repeat the same steps for iOS app by choosing iOS instead of Android in the first step.
- Please note that some terms may be different than the ones in the google-services.json file. For example, the mobilesdk_app_id in the google-services.json file is called "appId" in the FirebaseOptions class. Another example is the project_number in the google-services.json file is called "messagingSenderId" in the FirebaseOptions class.
Google Maps on Android

Edit the manifest file in android/app/src/main/AndroidManifest.xml by adding your Google maps API key in the following line
```
            com.google.android.geo.API_KEY
```
Google Maps on IOS

Replace YOUR-API-KEY with your Google maps API key in ios/Runner/AppDelegate.swift
```
            GMSServices.provideAPIKey("YOUR-API-KEY")
```
Google Maps, server url and splash screen configuration in Flutter

Edit the file lib/utils/config.dart to configure the Flutter app before building.
- Backend URL: change the following line with your backend URL
- Google Api Key: change the following line with your Google maps API key
- Socket Server URL and port number: change the following lines
Payment gateways configuration in Flutter for Android
If you build the apps for iOS, you must skip the following steps and go to the next section.

The system has four types of payments. They are as follows:
1. Braintree
2. RazorPay
3. FlutterWave
4. PayStack
5. Stripe
In the following, we show how to configure each of them

1) Braintree
1. Go to your account in https://www.braintreegateway.com or https://sandbox.braintreegateway.com
2. Go to "Settings" from the upper right menu, then click on "API"
3. Click on "Generate New Tokenization Key"
4. Edit the file lib/utils/config.dart to set the variable braintreeTokenizationKey with the generated tokenization key.
2) RazorPay
1. Open your "RazorPay" account dashboard
2. Choose "Settings" section in the left pane, then click on "API Keys"
3. Get the "Key Id".
4. Edit the file lib/utils/config.dart to set the variable razorpayKey with the "Key Id".
3) FlutterWave
1. Open your "Flutterwave" account dashboard
2. Choose "Settings" section in the left pane, then click on "API"
3. Get the "Public Key".
4. Edit the file lib/utils/config.dart to set the variable flutterwaveKey with the "Public Key".
4) PayStack
1. Open your "PayStack" account dashboard
2. Choose "Settings" section in the left pane, then click on "API Keys & Webhooks"
3. Get the "Public Key".
4. Edit the file lib/utils/config.dart to set the variable paystackKey with the "Public Key".
5) Stripe
1. Open your "Stripe" account dashboard
2. On the home page, you will find to the right "For developers" section.
3. Get the "Publishable Key".
4. Edit the file lib/utils/config.dart to set the variable stripeKey with the "Publishable Key".
Payment gateways configuration in Flutter for iOS
1. In the guardian app, edit the file pubspec.yaml.
2. Find the comment "comment out the below lines if you are building for iOS" and comment out the following lines until the next comment "end comment building for iOS"
3. Run:
```
         flutter pub get
```
4. Copy the file contents of the "lib/gui/screens/wallet_screen_ios.dart" after uncommenting its lines to "lib/gui/screens/wallet_screen.dart"

Configure Ads

Edit the file lib/utils/config.dart to configure the ads by changing the following lines

         static String androidInterstitialAdUnitId = "YourAdmobInterstitialIdForAndroid";
         static String iosInterstitialAdUnitId = "YourAdmobInterstitialIdForIOS";

Edit the manifest file in android/app/src/main/AndroidManifest.xml by adding your Admob App ID in the following line

         com.google.android.gms.ads.APPLICATION_ID

Build flutter
```
         flutter pub get
```

C) Android App - top

In order to build the android app correctly, please make sure that you have installed the latest Android Studio IDE. Please install Android Studio 3.5 or above.

Prepare for release

Before you can publish your Flutter app to Google Play, the app needs a digital signature.

If you don’t already have a keystore, create one

On Mac, use the following command:

keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

On Windows, use the following command:

keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key

Create a file named /android/key.properties that will reference your keystore, it will look like this:

storePassword= keyPassword= keyAlias=key
storeFile=/key.jks>

Configure signing in Gradle

You will find your Gradle file at /android/app/build.gradle. Start editing and follow these steps:

Add the keystore information that we just created before "android{":

def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}

android {

Then, replace:

content_copy
buildTypes {
release {
// TODO: Add your own signing config for the release build.
// Signing with the debug keys for now,
// so `flutter run --release` works.
signingConfig signingConfigs.debug
}
}

With the signing configuration info:

content_copy
signingConfigs {
release {
keyAlias keystoreProperties['keyAlias']
keyPassword keystoreProperties['keyPassword']
storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
storePassword keystoreProperties['storePassword']
}
}
buildTypes {
release {
signingConfig signingConfigs.release
}
}

Then, go to the defaultConfig block.
Enter a final unique applicationId. For example, "com.SchoolTripTrack.driver"
Give your app a versionName and versionCode.

You have now configured your app’s Gradle file and your release builds will be signed automatically.

Build and release the app

Now you’ll build your app’s APK so it can be uploaded to the Google Play Store. Go to your command line and follow these steps:

Enter cd
Run flutter build apk

If everything goes well, you will have an APK ready at /build/app/outputs/apk/release/app.apk

Publish to the Google Play Store

Your app is ready! Next, follow this link to uploading an APK to the Google Play Store.

Alternative way: Generate APK from Android Studio

You can also generate the APK directly from the Android Studio by opening the android project inside the purchased folder.

Go to file-> open and go to the location "FlutterApp/android" of the purchased "FlutterApp/android" folder

Go to build->Generate signed Bundle/APK. Here I will show you how to generate APK.

You can use an existing key

Or generate a new key by click "Create new" amd filling the following form

Then choose the path that you want to save the generated APK in. Make sure that V1 and V2 checkboxes are checked.

D) iOS App - top

In order to build the iOS app please make sure that you have XCode installed. Please install XCode 11.3 or above, then open it and follow the following steps

Prerequisites

Make sure that you’ve covered Apple’s guidelines for releasing an app on the app store.
Have your app’s icons and launch screens ready.
Have an Apple Developer account.

Prepare for building

Please run this command in the the project directory

flutter build ios

Before you can build and release your app on the App Store, you need to set up a place for it using App Store Connect. But first, you need to register a unique bundle ID for your app. This can be done by logging into your Apple Developer account and following these steps:

Open the App IDs page.
Click + to create a new Bundle ID.
Fill out the needed information: App Name, and Explicit App ID.
If your app needs specific services, select them and click Continue.
Review the details and click Register to finish.

Now that we have a unique bundle ID, it’s time to set up a place for your app on the App Store Connect. Log in to the App Store Connect.

Select My Apps.
Click + then select New App.
Fill in your app details and make sure iOS is selected, then click Create.
From the sidebar, select App Information.
In the General Information section, select the Bundle ID that you registered above.

Adjust Xcode project settings for release

You’ve set everything up from Apple’s side, and next you’ll adjust your Xcode project’s settings to prepare your app for release. Go ahead and fire up Xcode.

Open Runner.xcworkspace that is inside your app’s iOS folder at "FlutterApp/ios".
From the Xcode project navigator, select the Runner project.
Then, select the Runner target in the main view sidebar.
Go to the General tab.
In the Identity section, fill out the information and make sure the Bundle Identifier is the one registered on App Store Connect.
In the Signing section, make sure Automatically manage signing is checked and select your team.
Fill out the rest of the information as needed.
Next, you’ll update your app’s icon. This can be done by selecting Assets.xcassets in the Runner folder from Xcode’s project navigator.

Build and upload your app

At this point, all the settings have been updated for release and there is a placeholder ready on App Store Connect, which means you can build and release.

From the command line, run flutter build ios
Make sure that you have added the keys of fcm to receive notifications. Please check here
Allow background modes for the app to receive notifications. Go to the Runner target in Xcode, then go to the Signing & Capabilities tab, then click on + Capability and add Background Modes. Then check Remote notifications.
Then go back to Xcode and reopen Runner.xcworkspace
Select Product -> Scheme -> Runner.
Select Product -> Destination -> Generic iOS Device.
Select Product -> Archive to produce a build archive.
From the Xcode Organizer window, select your iOS app from the sidebar, then select the build archive you just produced.
Click the Validate… button to build.
Once the archive is successfully validated, click Upload to App Store….

Back on App Store Connect, check the status of your build from the Activities tab. Once it’s ready to release:

Go to Pricing and Availability and fill out the required information.
From the sidebar, select the status.
Select Prepare for Submission and complete all required fields.
Click Submit for Review.

That’s it! Your app will now be uploaded to the App Store. Apple will review your app before releasing and keep you updated on the status of your app.

E) FAQ - top

How to change the theme of the app?

Edit the app_theme.dart file in the path "FlutterApp/lib/app_theme.dart". The file contains all used colors in the app and font styles of the text.

How to change the launcher icon for Android and iOS?

For Android, go to "FlutterApp/android/app/src/main/res" folder. You should see some folders beginning with mipmap-* which represent different pixel densities. Replace launcher_icon.png file in each folders to use custom icons.

For iOS, the icon config and files are located inside "FlutterApp/ios/Runner/Assets.xcassets/AppIcon.appiconset". The Contents.json file defines a list of icon images with different sizes and scales. The files are located in the same folder. It's recommended to follow the guideline for designing iOS icon

Once again, thank you so much for purchasing our SchoolTripTrack App. As I said at the beginning, I'd be glad to help you if you have any questions. I'll do my best to assist. If you have a more general question relating to the items on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

CreativeAppsDev Team

Go To Table of Contents

“SchoolTripTrack Flutter Apps” Documentation

“Flutter Apps”

Table of Contents

A) What is the SchoolTripTrack App? - top

B) Configuration - top

Firebase

Google Maps on Android

Google Maps on IOS

Google Maps, server url and splash screen configuration in Flutter

Payment gateways configuration in Flutter for Android

1) Braintree

2) RazorPay

3) FlutterWave

4) PayStack

5) Stripe

Payment gateways configuration in Flutter for iOS