Build the Flutter sample app

Overview

The Acoustic Tealeaf SDK provides a sample app that you can use to build to view quick example implementations of all core SDK functionality.

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.

Install the Acoustic Flutter plug-in

Complete the following steps to set up the Flutter hooks from the Tealeaf plugin from git and launch the sample app.

1. Clone the Tealeaf plugin from git.

git clone https://github.com/go-acoustic/Tealeaf-Flutter

2. After the command runs successfully, delete the rm pubspec.lock and rm example/pubspec.lock files from your project and then open the cloned git project in your IDE.
3. You must now do a flutter clean to include the updated pubspec.lock files in the project. In the root directory of the project, run the following command.

flutter clean && flutter pub get
cd example
flutter clean && flutter pub get

Configure Tealeaf

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.

For the Android project: Update the TealeafBasicConfig.properties file. You can find the TealeafBasicConfig.properties file in the tl_flutter_plugin/example/Android/app/src/main/assets/ folder.

For the iOS project: Update the TealeafBasicConfig.plist file. You can find the TealeafBasicConfig.plist file in the [your project]/ios/Pods/TealeafDebug/SDKs/iOS/Debug/TLFResources.bundle/ folder. You can also run the find . -name “TealeafBasicConfig.plist” in the terminal to locate the file.

Launch the sample app

The sample app is now ready to launch. You can run the sample app from your IDE or the terminal.

flutter run

📘

Note:

To build the sample again, you must clean the project in the example directory by running the flutter clean && flutter pub get command.

Replay sessions for the example 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.