0 purchases
cross classify
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 #
Clone or download the project.
Navigate to the example folder in the terminal.
Run flutter pub get to install dependencies.
Open the project in your preferred Flutter IDE.
Change the siteId and apiKey (from your CrossClassify project) in CrossClassify instances placed in the main file.
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:
Install the CrossClassify SDK
Import the CrossClassify module
Initialize the CrossClassify object
Track pages without any form
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
copied to clipboard
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';
copied to clipboard
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());
}
copied to clipboard
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),
),
),
),
),
)
copied to clipboard
Step 5: Track pages containing a form #
For each page that contains a form (e.g., signup, login), follow these instructions:
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 [email protected]'),
),
)
copied to clipboard
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),
),
),
copied to clipboard
Now you have successfully integrated CrossClassify SDK into your Flutter app.
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.