Integrations
Flutter

InfraStack Flutter Integration Steps

InfraStack AI provides a comprehensive toolkit for collecting telemetry data within your Flutter applications, leveraging OpenTelemetry. This documentation will guide you through the setup process to integrate InfraStack with your Flutter applications.

Step 1: Install OpenTelemetry SDKs

First, add the required OpenTelemetry packages to your Flutter project by adding the following lines to your pubspec.yaml file:

dependencies:
  opentelemetry_api: ^0.4.0
  opentelemetry_sdk: ^0.4.0
  opentelemetry_exporter_otlp: ^0.4.0

Then, run the following command to install the packages:

flutter pub get

Step 2: Configure Environment Variables

Set the necessary environment variables for InfraStack and OpenTelemetry configuration. These variables help secure and authenticate the data transmission to InfraStack. Replace <YOUR_API_KEY> with your actual API key.

Step 3: Initialize OpenTelemetry in Your Application

Create a new Dart file opentelemetry_config.dart and initialize the OpenTelemetry SDK. You can configure the endpoint and API key either by using environment variables or by hardcoding them within your application.

Import Required Packages

import 'package:opentelemetry_api/opentelemetry_api.dart';
import 'package:opentelemetry_sdk/opentelemetry_sdk.dart';
import 'package:opentelemetry_exporter_otlp/opentelemetry_exporter_otlp.dart';
import 'dart:io';

Initialize the Exporter and Tracer Provider

Future<void> initOpenTelemetry() async {
  final endpoint = Platform.environment['OTEL_EXPORTER_OTLP_ENDPOINT'] ?? 'https://collector-http.infrastack.ai';
  final headers = Platform.environment['OTEL_EXPORTER_OTLP_HEADERS'] ?? 'infrastack-api-key:<YOUR_API_KEY>';
  final serviceName = Platform.environment['OTEL_SERVICE_NAME'] ?? 'my-first-app';
 
 
 
  final exporter = OtlpTraceExporter(
    endpoint: Uri.parse(endpoint),
headers: {headers.split(':')[0]: headers.split(':')[1]},
  );
 
  final sdk = OpenTelemetrySdk(
    tracerProvider: SdkTracerProvider(
      resource: Resource([ServiceName(serviceName)]),
      spanProcessors: [SimpleSpanProcessor(exporter)],
    ),
  );
 
  final tracer = sdk.getTracer('example-tracer');
 
  // Set the global tracer provider
  OpenTelemetry.instance = sdk;
}

Step 4: Run Your Application

Run your Flutter application as usual:

flutter run

Step 5: Check Your Application Trace Data

You can monitor and analyze the telemetry data collected by visiting the InfraStack Dashboard (opens in a new tab), providing a comprehensive view of your application's performance and health.

Example Trace

To generate and view an example trace, you can instrument specific parts of your application code. Here is how you can do it:

import 'package:flutter/material.dart';
import 'opentelemetry_config.dart';
 
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initOpenTelemetry();
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('OpenTelemetry Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              final tracer = OpenTelemetry.instance.tracerProvider!.getTracer('example-tracer');
              final span = tracer.startSpan('example-span');
              // Simulate some work
              span.end();
            },
            child: Text('Generate Trace'),
          ),
        ),
      ),
    );
  }
}

This example creates a trace with a single span named "example-span". You can add more spans around different parts of your application to trace various operations.

Additional Instrumentation Options

OpenTelemetry provides specialized instrumentation options for various libraries. For example:

  • HTTP requests: To monitor client and server HTTP requests, use the relevant HTTP instrumentation packages.
  • SQL database queries: To monitor interactions with SQL databases, use the relevant SQL instrumentation packages.
  • gRPC calls: To track gRPC requests, use the relevant gRPC instrumentation packages.

[!NOTE] You can find all the information about OpenTelemetry and SDK (opens in a new tab).

These instrumentations allow you to collect detailed data from different components of your application, which is critical for performance analysis and troubleshooting.


By following these steps, you can successfully integrate InfraStack AI with your Flutter application, enabling powerful observability and monitoring capabilities with minimal setup.