To integrate Nudges into your Flutter app, ensure that you have completed the basic integration of the Nudge Core SDK. If you haven’t done this yet, please follow the instructionshere.
Step 1: Setting Up the Nudge Tracker Observer
First, add the NudgeTrackerObserver
class at the root of your application:
final NudgeTrackerObserver _trackerObserver = NudgeTrackerObserver();
Next, incorporate it into your application as shown below:
return NudgeProvider(
nudgeInstance: core,
plugins : []
child: MaterialApp(
navigatorKey: NudgeProviderState.navigatorKey,
navigatorObservers : [_trackerObserver],
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
),
);
Step 2: Importing and Initializing NudgeNudgesUi
Import the NudgeNudgesUi
class from nudge_nudges.dart
:
import 'package:nudge_nudges/nudge_nudges_ui/nudge_nudges.dart';
Create an instance of NudgeNudgesUi
:
final nudges = NudgeNudgesUi();
Add this instance to the plugins
list in the NudgeProvider
:
return NudgeProvider(
nudgeInstance: core,
plugins : [nudges]
child: MaterialApp(
navigatorKey: NudgeProviderState.navigatorKey,
navigatorObservers : [_trackerObserver],
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(),
),
);
Step 3: Adding Labels to Your Widgets
To track specific widgets where you want to show nudges, import the NudgeWidgetTracker
:
import 'package:nudge_core/nudge_labels_manager/NudgeWidgetTracker.dart'
Use NudgeWidgetTracker.register("YOUR_UNIQUE_WIDGET_NAME")
to track any widget in your application.
Here's an example:
ElevatedButton(
key: NudgeWidgetTracker.register("HeyButton"),
onPressed: () {
nudge.track(type: 'Name of your component');
},
child: Text('Hey'),
),
Note:
Make sure each widget name is unique to avoid conflicts.
Step 4: Connecting to the Dashboard
To create nudges from the Dashboard, connect your Android application by adding the following snippet to the Manifest file under the MainActivity section. This allows Nudge to send app pages to the dashboard for creating experiences:
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="nudge-{ClientID}"
android:host="nudgenow.com"
android:pathPattern="/.*/.*" />
</intent-filter>
That's it!
You are now ready to create Nudges on the dashboard and see them in your Flutter application.