Flutter Android Setup

Introduction

In this article, we are going to set up the TYT App’s initial setup for real-time use cases.

Setup Instructions

flutter version for this project is 'Channel stable, 3.3.0'
Open your project File the Visual Studio Code which is used to create the project and also it is very powerful.
and in terminal run command 'flutter pub get'
project structure is given in image below

Major things to do:

Change Base Url

Change the BASE_URL Variable Presented in the Constants File.
- It just updates your server’s primary URL to access all types of API Services From the App to your Server.
- like this
  - Note : File Location : project/lib/functions/functions.dart

 String url = 'your base url here';

Change Website URL

change website url in given files,
- Note : File Location project/lib/pages/login/login.dart

onTap: () {

openBrowser(

'your terms and condition url here');

},

child: Text(

languages[choosenLanguage]['text_terms'],

style: GoogleFonts.roboto(

fontSize: media.width * sixteen,

color: buttonColor),

),

Note : File Location "project/lib/pages/login/login.dart"

onTap: () {

openBrowser(

'your privacy policy url here');

},

child: Text(

languages[choosenLanguage]['text_privacy'],

style: GoogleFonts.roboto(

fontSize: media.width * sixteen,

color: buttonColor),

),

Note : File Location "project/lib/pages/navigatorPages/about.dart"

onTap: () {

openBrowser(

'your terms and conditions url here');

},

child: Text(

languages[choosenLanguage]

['text_termsandconditions'],

style: GoogleFonts.roboto(

fontSize: media.width * sixteen,

fontWeight: FontWeight.w600,

color: textColor),

),

Note : File Location "project/lib/pages/navigatorPages/about.dart"

onTap: () {

openBrowser(

'your privacy policy url here');

},

child: Text(

languages[choosenLanguage]['text_privacy'],

style: GoogleFonts.roboto(

fontSize: media.width * sixteen,

fontWeight: FontWeight.w600,

color: textColor),),

Note : File Location "project/lib/pages/navigatorPages/about.dart"

onTap: () {

openBrowser('your website main page url here');

},

child: Text(

languages[choosenLanguage]['text_about'],

style: GoogleFonts.roboto(

fontSize: media.width * sixteen,

fontWeight: FontWeight.w600,

color: textColor),

),

Google Map & Cloud Configure

Create & configure account for map using Google map & Cloud by following below documents.
- Google Cloud console link: https://developers.google.com/maps/documentation/android-sdk/cloud-setup
- firebase setup doc: https://firebase.google.com/docs/android/setup
After created & enabled the billing from google cloud & map console
- add map api key change the map keys in given locations

Note : File Location "project/android/app/src/main/AndroidManifest.xml"

<meta-data android:name="com.google.android.geo.API_KEY"

android:value="your maps api key here"/>

Note : File Location "project/lib/functions/functions.dart"

String mapkey = 'your map key here';

We need to create nodes in firebase realtime database, please find the sample json database below or refer firebase setup.
Sample-json
call_FB_OTP node is used to configure whether the firebase otp should used or dummy otp should use for our testing purpose
Please make sure you have created the nodes mentioned below
- call_FB_OTP
- driver_android_version:1.0.7
- driver_ios_version:1.0.4
- user_android_version:1.0
- user_ios_version:1.0.3
Update the rules part with below content

  {
  "rules": {
    "drivers": {
      ".read": true,
      ".write":true,
        ".indexOn":["is_active","g","service_location_id","vehicle_type","l","ownerid"],
      },
    "requests": {
      ".read": true,
      ".write": true,
        ".indexOn":["service_location_id"],
    },
       "SOS": {
      ".read": true,
      ".write": true
    },
       "call_FB_OTP": {
      ".read": true,
      ".write": true
    },
      "driver_android_version": {
      ".read": true,
      ".write": true
    },
      "driver_ios_version": {
      ".read": true,
      ".write": true
    },
      "user_android_version": {
      ".read": true,
      ".write": true
    },
      "user_ios_version": {
      ".read": true,
      ".write": true
    },
      "user_package_name": {
      ".read": true,
      ".write": true
    },
      "user_bundle_id": {
      ".read": true,
      ".write": true
    },
      "driver_package_name": {
      ".read": true,
      ".write": true
    },
      "driver_bundle_id": {
      ".read": true,
      ".write": true
    },
      "request-meta": {
      ".read": true,
      ".write": true,
        ".indexOn":["driver_id","user_id"]
    },
      "bid-meta": {
      ".read": true,
      ".write": true,
        ".indexOn":["driver_id","user_id","g"]
    },
      "owners": {
      ".read": true,
      ".write": true,
        ".indexOn":["driver_id","user_id"]
    }
   }
 }

Change Package Name

Download & Paste the google-services.json into the 'project/android/app' folder properly to make proper communication from your App which is a client to FireBase.

copy the package name from firebase and paste it in the following files

Note : File Location "project/andrroid/app/src/main/AndroidManifest.xml"

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="package name here">

Note : File Location "project/android/app/src/profile/AndroidManifest.xml"


<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="package name here">

Note : File Location "project/android/app/src/debug/AndroidManifest.xml"

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="package name here">

Note : File Location "project/android/app/build.gradle"

applicationId "package name here"

Note : File Location "project/android/app/src/main/kotlin/../../../MainActivity.kt"
- add package name here
```
    package com.project.name
```
1. change folder name
if your package name is com.package.android then,
```
project/android/app/src/main/kotlin/com/something/something/ to project/android/app/src/main/kotlin/com/package/android
```

Change Icons

replace icons images in following folders in given name
- project/assets/images/ - logo.png
- project/android/app/src/main/res/mipmap-hdpi - ic_launcher.png (72x72)
- project/android/app/src/main/res/mipmap-mdpi - ic_launcher.png (48x48)
- project/android/app/src/main/res/mipmap-xhdpi - ic_launcher.png (96x96)
- project/android/app/src/main/res/mipmap-xxhdpi - ic_launcher.png (144x144)
- project/android/app/src/main/res/mipmap-xxxhdpi - ic_launcher.png (192x192)
- project/android/app/src/main/res/drawable/ - logo.png

Change Display Name

change app display name in file,

Note : File Location "project/android/app/src/main/AndroidManifest.xml"

android:label="project name"

     project/lib/main.dart

title: 'project name',

Change App Display name in Driver app for Background location notification Note: File Location "project/lib/functions/functions.dart"

  foregroundNotificationConfig:
            const geolocs.ForegroundNotificationConfig(
          notificationText:
              "Tagxi Driver will continue to receive your location in background",
          notificationTitle: "Location background service running",

change payment gateway keys

change payment gateway keys,

Note : File Location "project/lib/pages/NavigatorPages/selectwallet.dart"

 Stripe.publishableKey = "your stripe key here"

Note : File Location "project/lib/pages/NavigatorPages/cashfreepage.dart"

'appId':'your cashfree id here',

'stage' : 'TEST or PROD here',

'color1' : 'theme color 1',

'color2' : 'theme color 2',

Note : File Location "project/pages/NavigatorPages/flutterwavepayment.dart"
- edit following details as per your need

final style = FlutterwaveStyle(

appBarText: "app bar text here",

buttonColor: color of button,

appBarIcon:const Icon(Icons.message, color: Color(0xffd0ebff)),

buttonTextStyle:const TextStyle(

color: Colors.black,

fontWeight: FontWeight.bold,

fontSize: 16,

),

appBarColor:const Color(0xffd0ebff),

dialogCancelTextStyle:const TextStyle(

color: Colors.redAccent,

fontSize: 16,

),

dialogContinueTextStyle:const TextStyle(

color: Colors.blue,

fontSize: 16,

),

);

final Customer customer = Customer(

name: userDetails['name'],

phoneNumber: userDetails['mobile'],

email: userDetails['email']);

flutterwave = Flutterwave(

context: context,

style: style,

publicKey: "public key of flutterwave here",

currency: "currency here",

txRef: userDetails['id'].toString() + '_' + DateTime.now().toString(),

amount: addMoney.toString(),

customer: customer,

paymentOptions: "ussd, card, barter, payattitude, account",

customization: Customization(title: "title"),

isTestMode: true or false,

);

Note : File Location "project/lib/pages/NavigatorPages/paystackpayment.dart"

plugin.initialize(publicKey: 'your paystack publickey here');

Note : File Location "project/lib/pages/NavigatorPages/razorpaypage.dart"

var options = {

'key': 'razor pay key here',

'amount': addMoney * 100,

'name': userDetails['name'],

Change app version

change app version

Note : File Location "project/pubsec.yaml"

version: 1.0.2+3

Create release keys

create release keys by running command in terminal

note: change anyname with any specific name you like,

keytool -genkey -v -keystore ~/[name].jks -keyalg RSA -keysize 2048 -validity 10000 -alias [your_alias_name]-storetype JKS

after running this command give the data asked in the terminal. after that it will save the jks file and display the location

Replace the jks key

replace the jks key details in file,

Note : File Location "project/android/key.properties as given below"

storePassword=password you entered while creating jks file

keyPassword=password you entered while creating jks file

keyAlias=alias name you given in the command for creating jks file

storeFile=jks file name with the location like ../../../jks

Generate SHA-1

Generate SHA-1 and SHA-256 keys from the project
- you will be able to get these keys in two ways these are
  - in terminal go to folder 'project/android/' and run the command './gradlew signinReport' then you will get debug and release SHA-1 and SHA-256
  - Run the below command in the terminal to get SHA keys
    - Key tool -genkey -v -keystore release.keystore -alias [your_alias_name] -keyalg RSA -keysize 2048 -validity 10000

Finally copy that debug and release keys and paste those in Firebase where

Click Settings icon (presented right on project overview ) -> project settings -> Your App section -> SHA certificate fingerprints click add button and paste & Submit.

Google Map Services Setup

Google Map Services Setup

Enable below services in cloud console
- Places API - which helps to get address while typing keys from the app
- Maps SDK For Android
- Google Sheets API - For translation sheets
- Android Device Verification - For Identify the App name to append in OTP from Firebase
- Geolocation APIs like distance matrix, geocoding, geolocations, Maps JavaScript, Maps static.

Generate APK

to download apk file run "flutter build apk --release" in terminal from project location, and you will get apk file in folder - project/build/app/outputs/apk/release/app-release.apk

Generate bundle file

to download app bundle file run "flutter build appbundle --release" in terminal from project location, and you will get app bundle file in folder - project/build/app/outputs/bundle/release/app-release.aab

Final Steps

after uploading app in playstore, then you will get a sha1 key and sha256 key from playstore, add those keys in your project as