Application Real-Time Monitoring Service:Connect to a Flutter application

Prerequisites

Before you begin, make sure you have:

Quick start

The following example shows the minimum code to initialize RUM in a Flutter application:

# pubspec.yaml
dependencies:
  alibabacloud_rum_flutter_plugin: ^2.1.0

// main.dart
import 'package:alibabacloud_rum_flutter_plugin/alibabacloud_rum_flutter_plugin.dart';

void main() {
  AlibabaCloudRUM().start(MyApp());
}

Run flutter packages get, then start the application. A successful integration produces the following log in the DEBUG CONSOLE:

[INFO][AlibabaCloudRUM]: alibabacloud_rum_flutter_plugin start success

For the full setup, including action capture and native SDK integration, continue with the steps below.

Step 1: Install the Flutter plugin

1. Add the RUM plugin dependency to pubspec.yaml:

      dependencies:
        flutter:
          sdk: flutter
   
        alibabacloud_rum_flutter_plugin: ^2.1.0

2. From the root of your Flutter project, install the dependency:

      flutter packages get

3. iOS only: In the ios directory, install the CocoaPods dependencies:

      cd ios && pod install

Step 2: Initialize the SDK

1. Import the RUM plugin in main.dart:

      import 'package:alibabacloud_rum_flutter_plugin/alibabacloud_rum_flutter_plugin.dart';

2. In main.dart, replace the default runApp() call with AlibabaCloudRUM().start():

   Method	Required	Description
   AlibabaCloudRUM().start()	Yes	Initializes the RUM SDK and wraps the root widget
   AlibabaCloudRUM().setUserName()	No	Associates monitoring data with a specific user identity

      void main() {
        // Replace runApp(MyApp()) with AlibabaCloudRUM().start()
        AlibabaCloudRUM().start(MyApp());
   
        // Optional: set a custom username for user-level tracking
        AlibabaCloudRUM().setUserName("xxxxxx");
      }

Step 3: Capture action events (optional)

To track user interactions such as clicks, wrap your widget tree with AlibabaCloudActionCapture:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AlibabaCloudActionCapture(
          child: Scaffold(
          appBar: AppBar(
            title: const Text('AlibabaCloudRUM'),
          ),
          body: // Your other code
        ));
  }
}

Step 4: Integrate native SDKs

Integrating the Alibaba Cloud RUM SDK into a Flutter project requires you to integrate both the Flutter plugin and the native SDKs for Android, iOS, and HarmonyOS. For integration instructions, see the following documents:

Verify the integration

Start the application. A successful integration produces the following message in the DEBUG CONSOLE:

[INFO][AlibabaCloudRUM]: alibabacloud_rum_flutter_plugin start success

Example output:

flutter: [2024-05-27 16:43:39][INFO][AlibabaCloudRUM]: alibabacloud_rum_flutter_plugin start success

What's next

• View application monitoring data

• Install Flutter