CrossClassify Flutter SDK

The CrossClassify SDK for Flutter apps comes with an integrated examples:

• example app: a simple Flutter app for login integrated with CrossClassify SDK.

See Section Setup Example Apps Locally to run the complete example apps, or navigate to Section SDK Integration Guide to easily integrate CrossClassify SDK with your Flutter app.

Prerequisites

• Flutter SDK
• Dart 2.12 or later
• A CrossClassify account

Setup Example Apps locally

1. Clone or download the project.
2. Navigate to the example folder in the terminal.
3. Run flutter pub get to install dependencies.
4. Open the project in your preferred Flutter IDE.
5. Change the siteId and apiKey (from your CrossClassify project) in CrossClassify instances placed in the main file.
6. Build and run the app.

SDK Integration Guide

To make it easy for you to get started with CrossClassify SDK, here's the list of the next steps:

1. Install the CrossClassify SDK
2. Import the CrossClassify module
3. Initialize the CrossClassify object
4. Track pages without any form
5. Track pages containing a form

Step 1: Install the CrossClassify SDK

Pub.dev

Add the following dependency to your pubspec.yaml file:

dependencies:
  crossclassify: ^1.0.0

Run the command flutter pub get to install the package.

Step 2: Import the CrossClassify module

In the Dart file where you want to use the CrossClassify SDK, add the following import statement at the top:

import 'package:cross_classify/cross_classify.dart';

Step 3: Initialize the CrossClassify object

Add the following code to your app, replacing -1 and "API_KEY_HERE" with your site ID and API key:

void main() {
  await CrossClassify.instance.initialize(
    apiKey: 'API_KEY_HERE',
    siteId: -1,
  );
  runApp(MyApp());
}

Step 4: Track pages without any form

For each page that contains no form (e.g., home page), simply wrap your widget with TraceablePageWidget widget:

TraceablePageWidget(
        actionName: 'Home Page',
        path: '/home',
        child: Center(
          child: Container(
            height: 80,
            width: 150,
            decoration: BoxDecoration(
                color: Colors.blue, borderRadius: BorderRadius.circular(10)),
            child: ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text(
                'Welcome',
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          ),
        ),
      )

Step 5: Track pages containing a form

For each page that contains a form (e.g., signup, login), follow these instructions:

1. Specify formFieldType, TextEditingController, and FocusNode using a FormFieldConfig. You can also specify tracking content permission. Be carefull to pass exactly the same controller and focus node to your child widget that you used for the ControllableFormFieldWidget.

ControllableFormFieldWidget(
  formFieldConfig: FormFieldConfig(
    formFieldType: 'email',
    trackContent: true,
    controller: controller,
    node: focusNode,
  ),
  child: TextField(
    controller: controller,
    focusNode: focusNode,
    decoration: const InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'email',
        hintText: 'Enter valid email id as abc@gmail.com'),
  ),
)

2. Specify the Form Submission Button

Add the following code to the button's onPressed handler:

ElevatedButton(
  onPressed: () {
    CrossClassify.instance.onFormSubmit();
    // Add your logic
  },
  child: const Text(
    'Login',
    style: TextStyle(color: Colors.white, fontSize: 25),
  ),
),

---

Now you have successfully integrated CrossClassify SDK into your Flutter app.