Add the Flutter SDK to your project

Overview

Add the Flutter SDK and instrument your iOS and Android applications developed with the Flutter framework for logging and analysis.

Before you begin

Set up the appropriate environment. For more information, see Set up an editor.

📘

Note:

The Acoustic Flutter plug-in supports Flutter SDK version 3.3.0 and above. Verify the correct Flutter SDK is installed when setting up your environment.

Create a Flutter project

Create a new Flutter project from your IDE. For example, from Android Studio you can create a project as follows:

  1. Click File > New> New Flutter project and click Next.
  2. Name your project, select the Android and iOS language for your project and the iOS and Android platforms, and click Finish.
  3. Open your newly created project.

Install Acoustic Flutter plug-in

You can install the Tealeaf Flutter plugin from the pub.dev site by completing the following instructions.

  1. In your IDE's terminal, run the following to install the plugin.
flutter pub add tl_flutter_plugin
  1. Import the plugin into your project's main.dart.
import 'package:tl_flutter_plugin/tl_flutter_plugin.dart';

Configure Tealeaf

Add Android SDK Gesture handler to the MainActivity.kt file

For Example: example/gallery/android/app/src/main/kotlin/io/flutter/demo/gallery/MainActivity.kt

import android.view.MotionEvent
import com.tl.uic.Tealeaf

class MainActivity : FlutterActivity() {

  override fun dispatchTouchEvent(e: MotionEvent?): Boolean {
      Tealeaf.dispatchTouchEvent(this, e)
  
      return super.dispatchTouchEvent(e)
  }
}
import android.view.MotionEvent;
import com.tl.uic.Tealeaf;

public class MainActivity extends FlutterActivity {

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        Tealeaf.dispatchTouchEvent(this, event);
        return super.dispatchTouchEvent(event);
    }
}

Add Tealeaf Wrapper and Navigation Observer to Flutter App

  1. Tealeaf - Wrapper for the App enables auto instrumentation.
  2. Tealeaf.loggingNavigatorObserver - Handles App's navigation route change event logging.
void main() async {
  ///
  /// Add Tealeaf Wrapper for auto instrumentation
  /// 
  runApp(Tealeaf(
    child: const GalleryApp()));
}

class GalleryApp extends StatelessWidget {
  ...
  @override
  Widget build(BuildContext context) {
    return ModelBinding(
      child: Builder(
        builder: (context) {
          return MaterialApp(
            ///
            /// Add the required Tealeaf loggingNavigatorObserver to the navigatorObservers list
            /// 
            navigatorObservers: [Tealeaf.loggingNavigatorObserver],

            ...
          );
      
      

TabBar, TabBarView and BottomNavigationBar

TabBar and TabBarView: These widgets handle navigation between tabs without pushing or popping routes. They use a TabController to manage the selected tab, and therefore, the Navigator and its observers are not involved in their navigation events.

BottomNavigationBar without Route-based navigation: If a BottomNavigationBar is used without a proper Route-based navigation setup (e.g., by showing and hiding widgets within the same screen), LoggingNavigatorObserver won't be able to log navigation events.

To log navigation events for these types of widgets, you would need to add below code snippets when the user interacts with these widgets (e.g., onTap or onChanged callback functions).:

    PluginTealeaf.logScreenLayout('LOAD', 'pageName');

To start capturing data from your applications and sessionize them for replay in Tealeaf, you must add your AppKey and PostMessageUrl in your config files.

Next, run the Flutter Tealeaf Automation CLI script following these steps:

  1. Copy the Tealeaf Automation CLI folder to your Home folder:
    $HOME/.pub-cache/hosted/pub.dev/tl_flutter_plugin-/package/tealeaf_cli to $HOME/tealeaf_cli
  2. Open a Terminal in the Tealeaf Automation CLI folder:
    cd $HOME/tealeaf_cli
    
  3. In the Terminal, run the command:
    dart pub get
    
  4. Next, change the Terminal to the folder of your Flutter project in which you want to configure the Tealeaf Flutter plugin.
    cd  <YOUR_PROJECT_PATH>
    
  5. In the Terminal, run the command:
    dart run $HOME/tealeaf_cli/bin/tealeaf_cli.dart
    
  6. Open your iOS project in Xcode.
    1. In the project navigator, right click on the Runner folder and select: Add filles to "Runner"....
    2. Select main.swift and TealeafApplication.swift and click on Add.

Configuration settings for GlobalScreenSettings, such as the masking properties and CaptureCustomEvents, are set in the TealeafLayoutConfig.json file in the native libraries.
For more information, see Configuration.

Replay sessions for your Flutter app

  1. After you set your AppKey and PostMessageUrl, run and build your project.
  2. Find the session ID and copy it from the build console.
  3. Go to your Tealeaf environment > session search screen.
  4. Paste the session ID, and now you will be able to see the session replay.