flutter-ios.md

Flutter iOS

Important

Flutter Obfuscation issue

Migration from the track-event solution to the low-code solution:

1. Refer to Step 2 in the installation guide, and verify the addition of the navigationObserver and clickListener.
2. The migration process will take up to 24 hours to complete and be reflected in Pendo, during the processing time, you will not be able to tag Pages and Features.

Important

Requirements:

• Flutter: ">=3.16.0"
• SDK: ">=3.2.0 < 4.0.0"

Supported Navigation Libraries:

• GoRouter 13.0 or higher
• AutoRoute 7.0 or higher

Step 1. Add Pendo dependency

In the root folder of your flutter app add the Pendo package: flutter pub add pendo_sdk.

Step 2. Pendo SDK integration

Note

The API Key can be found in your Pendo Subscription Settings in App Details.

1. For optimal integration place the following code at the beginning of your app's execution:

   import 'package:pendo_sdk/pendo_sdk.dart';
   var pendoKey = 'YOUR_API_KEY_HERE';
   await PendoSDK.setup(pendoKey);

2. Initialize the Pendo Session where your visitor is being identified (e.g. login, register, etc.).

   import 'package:pendo_sdk/pendo_sdk.dart';
   final String visitorId = 'John Smith';
   final String accountId = 'Acme Inc.';
   final dynamic visitorData = {'Age': '25', 'Country': 'USA'};
   final dynamic accountData = {'Tier': '1', 'Size': 'Enterprise'};
   
   await PendoSDK.startSession(visitorId, accountId, visitorData, accountData);

Tip

To begin a session for an anonymous visitor, pass null or an empty string '' as the visitor id. You can call the startSession API more than once and transition from an anonymous session to an identified session (or even switch between multiple identified sessions).

3. Add Navigation Observers
   When using Flutter Navigator API add PendoNavigationObserver for each app Navigator:

   import 'package:pendo_sdk/pendo_sdk.dart';
   // Observes the MaterialApp/CupertinoApp main Navigator
   return MaterialApp(
       ...
       navigatorObservers: [
           PendoNavigationObserver()
       ],); 
   
   // Observes the nested widget Navigator
   return Navigator(
       ...
       observers: [
           PendoNavigationObserver()
       ],);

Tip

The Pendo SDK uses the Route name to uniquely identify each Route. For the best practice please make sure to provide each route with unique name in the RouteSettings. That should also be applied to the showModalBottomSheet api.

Navigation Types:

• GoRouter

  When using GoRouter, change the setup API call to include the correct navigation library, like so:

  PendoSDK.setup(pendoKey, navigationLibrary: NavigationLibrary.GoRouter);

  When using GoRouter, apply the addPendoListenerToDelegate() to your GoRouter instance. Make sure to add it once (e.g adding it in the build method will be less desired)

  import 'package:pendo_sdk/pendo_sdk.dart';
  
  final GoRouter _router = GoRouter()..addPendoListenerToDelegate()
  
  class _AppState extends State<App> {
      @override
      Widget build(BuildContext context) {
          return PendoActionListener(
              child: MaterialApp.router(
              routerConfig: _router,
              ),
          );
      }
  }

Tip

Pendo SDK uses routerDelegate listener to track route change analytics, make sure your route is included in the GoRouter routes

• AutoRoute

  When using AutoRoute, change the setup API call to include the correct navigation library, like so:

  PendoSDK.setup(pendoKey, navigationLibrary: NavigationLibrary.AutoRoute);

  When using AutoRoute, apply the addPendoListenerToDelegate() to your AutoRoute.config() instance.
  Make sure to add it once (e.g adding it in the build method will be less desired)
  

  import 'package:pendo_sdk/pendo_sdk.dart';
  
  @AutoRouterConfig()
  class AppRouter extends RootStackRouter {
      @override
      List<AutoRoute> get routes => [];
  }
  
  final AppRouter _router = AppRouter()..config().addPendoListenerToDelegate();
  
  class _AppState extends State<App> {
      @override
      Widget build(BuildContext context) {
          return PendoActionListener(
              child: MaterialApp.router(
              routerConfig: _router.config(),
              ),
          );
      }
  }

Tip

Pendo SDK uses routerDelegate listener to track route change analytics, make sure your route is included in the AutoRoute routes.

4. Add a click listener
   Wrap the main widget with a PendoActionListener in the root of the project:

   import 'package:pendo_sdk/pendo_sdk.dart';
   Widget build(BuildContext context) {
   return PendoActionListener( // Use the PendoActionListener to track action clicks 
     child: MaterialApp(
       title: 'Title',
       home: Provider(
       create: (context) => MyHomePageStore()..initList(),
         child: MyHomePage(title: Strings.appName),
       ),
       navigatorObservers: [PendoNavigationObserver()], // Use Pendo Observer to track the Navigator stack transitions
       );
   )
   }
   

Tip

You can use track events to programmatically notify Pendo of custom events of interest:

import 'package:pendo_sdk/pendo_sdk.dart';
await PendoSDK.track('name', { 'firstProperty': 'firstPropertyValue', 'secondProperty': 'secondPropertyValue'});

Step 3. Mobile device connectivity and testing

Note

The Scheme ID can be found in your Pendo Subscription Settings in App Details.

These steps enable guide testing capabilities.

1. Add Pendo URL scheme to info.plist file:

   Under App Target > Info > URL Types, create a new URL by clicking the + button.
   Set Identifier to pendo-pairing or any name of your choosing.
   Set URL Scheme to YOUR_SCHEME_ID_HERE.

   

2. To enable pairing from the device:

   In the AppDelegate file add or modify the openURL function:

   Swift Instructions - Click to expand or collapse

   import Pendo
   
   @UIApplicationMain
   class AppDelegate:  FlutterAppDelegate {
       override func application(_ app: UIApplication,open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
           if url.scheme?.range(of: "pendo") != nil {
               PendoManager.shared().initWith(url)
               return true
           }
           // your code here...
           return true
       }
   }

   Objective-C Instructions - Click to expand or collapse

   @import Pendo;
   //your code
   - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
       if ([[url scheme] containsString:@"pendo"]) {
           [[PendoManager sharedManager] initWithUrl:url];
           return YES;
       }
       //  your code here ...
       return YES;
   }

Step 4. Verify installation

1. Test using Xcode:
   Run the app while attached to Xcode.
   Review the Xcode console and look for the following message:
   Pendo Mobile SDK was successfully integrated and connected to the server.
2. In the Pendo UI, go to Settings>Subscription Settings.
3. Select the Applications tab and then your application.
4. Select the Install Settings tab and follow the instructions under Verify Your Installation to ensure you have successfully integrated the Pendo SDK.
5. Confirm that you can see your app as Integrated under subscription settings.

Limitations

• Notes, Known Issues & Limitations.
• To support hybrid mode in Flutter, please open a ticket.

Developer documentation

• API documentation available here.
• Integration of native with Flutter components available here.

Troubleshooting

• For technical issues, please review open issues or submit a new issue.
• Release notes can be found here.
• For additional documentation, visit our Help Center Mobile Section.