Flutter SDK Setup AppRemark

To integrate AppsOnAir AppRemark Flutter SDK to your Flutter Apps, follow the below steps

apiKey Setup

• Make sure to configure the API key properly. For additional information Getting started

Step 1. iOS Requirements and setup

1.1 Requirements​

• Minimum deployment target: 12.0

• This pod requires photo permissions. Add the following usage description to your Info.plist:

info.plist

<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) need permission to choose image from gallery for App Remark feature.</string>

Step 2. Android Requirements​ and setup

2.1 Requirements​

• JAVA 11 required

• An Android 7.0+ device or emulator.

• Project using AndroidX.

• compileSDKVersion set to 34 or higher.

• Targets API level 24 (NOUGAT) or higher

• Android Gradle Plugin (AGP): Version 8.0.2 or higher

• Gradle version 8.0 or higher

• Kotlin Version 1.7.10 or higher

• Uses Jetpack (AndroidX), which includes meeting these version requirements:

  • compileSdkVersion 34 or later

• Set up a physical device or use an emulator to run your app.

• Create or login to your AppsOnAir (AoA) Account

• Goto the your app details page -> App services tab -> API key tab to get your AoA services API Key

2.2 Setup

Add AppsOnAir Gradle Plugin

• In settings.gradle:

Groovy

setting.gradle

pluginManagement {
   ……
   repositories {
       google()
       mavenCentral()
       gradlePluginPortal()
       maven { url 'https://jitpack.io' }
   }
}

Kotlin

setting.gradle.kts

pluginManagement {
   ……
   repositories {
       google()
       mavenCentral()
       gradlePluginPortal()
       maven("https://jitpack.io")
   }
}

• In root level build.gradle:

Groovy

build.gradle

allprojects {
   repositories {
       google()
       mavenCentral()
       maven { url 'https://jitpack.io' }
   }
}

Kotlin

build.gradle.kts

allprojects {
   repositories {
       google()
       mavenCentral()
       maven("https://jitpack.io")
   }
}

Newer versions of Android Studio

When creating a new project from Android Studio Artic Fox (or newer) the allprojects{...} is no longer added in the project level gradle.so need add in settings.gradle

gradle.properties

android.useAndroidX = true;
android.enableJetifier = true;

Add below code to your Launcher activity

• Add the following code because Fluter is preventing the SDK from capturing the current screen.

MainActivity

class MainActivity : FlutterActivity(){
    override fun getRenderMode(): RenderMode {
        return RenderMode.texture
    }
}

Create strings.xml

• Create string.xml file in to android/app/resourse/value and add below code.

string.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name"> YOUR_APP_NAME </string>
</resources>

Step 3. Add the AppRemark Service in Flutter code

3.1 Add the SDK

• Run the following command to add the package:

pubspec.yaml

 $ flutter pub add appsonair_flutter_appremark

3.2 Import the SDK

Import

import "package:appsonair_flutter_appremark/app_remark_service.dart";

Step 4. Initialize the Service

Here’s how to initialize the service:

@override
void initState() {
  super.initState();
  Future.delayed(const Duration(milliseconds: 100), () async {
    await AppRemarkService.initialize(
      context,
      shakeGestureEnable: false, // Set to true or false as per your need
    );
  });
}

Properties Information

initialize(BuildContext context,{bool shakeGestureEnable = true,Map<String, dynamic> options = const {}})

• Initialize the AppRemarkService with default "Add Remark" screen.
• The AppRemarkService initialization allows you to integrate remark functionality. By default, the shake gesture is enabled shakeGestureEnable: true, allowing the device to capture the current screen on a shake. To disable this behavior, you can explicitly set shakeGestureEnable to false.

Step 5. Customization and Usage

5.1 Customize the "Add Remark" Screen

• Customize the "Add Remark" screen theme according to your app theme by passing an options map containing key-value pairs.
• Available keys of options for Customization

Key	DataType	Value	Description
pageBackgroundColor	String	"#E8F1FF"	Set page background color
appBarBackgroundColor	String	"#E8F1FF"	Set appbar background color
appBarTitleText	String	"Add Remark"	Set appbar title text
appBarTitleColor	String	"#000000"	Set appbar title color
remarkTypeLabelText	String	"Remark Type"	Set remark type label text
descriptionLabelText	String	"Description"	Set description label text
descriptionHintText	String	"Add description here..."	Set description hint text
descriptionMaxLength	int	255	Set description max length
buttonText	String	"Submit"	Set button text
buttonTextColor	String	"#FFFFFF"	Set button text color
buttonBackgroundColor	String	"#007AFF"	Set button background color
labelColor	String	"#000000"	Set text field label color
hintColor	String	"#B1B1B3"	Set text field hint color
inputTextColor	String	"#000000"	Set text field input text color

example

AppRemarkService.initialize(
  context,
  options: {
    'pageBackgroundColor': '#FFC0CB',
    'descriptionMaxLength': 25,
  }
);

5.2 Open the AppRemark Screen Manually

AppRemarkService.addRemark(context);

5.3 Send Custom Payload

AppRemarkService.addRemark(
  context,
  extraPayload: {
    'title': 'Initial Demo',
    'isFromIndia': true
  },
);

Properties Information

addRemark(BuildContext context, {Map<String, dynamic> extraPayload = const {}})

• Use the addRemark method to open the "Add Remark" screen manually:
• Send additional meta-data by passing extraPayload as a map with key-value pairs:

Initialization

Make sure that to call initialize() method after MaterialApp!

for IOS

Don't forgot to install pods! (for iOS)

Step 6. Run your App and Setup your app remark services

Run your app by using core editor on Android/IOS simulators or any physical device to make sure it builds correctly.

note

All submitted screenshots and feedback will be displayed on a web portal.

For more details explore the example