Interactive Demo

See Dartastic.io in action with our instrumented Wondrous app.

Run the Demo Locally

Our online demo is being set up. In the meantime, you can run a local demo by following these steps:

You can demo this locally by running an OTel collector + backend with Docker. Follow the instructions in the demo repository's README.md:

COMING SOON
View Demo Repository
What You'll Need:
  • Docker and Docker Compose installed on your system
  • Flutter development environment set up
What You'll See:
  • gskinner's Wondrous Flutter instrumented for OpenTelemetry
  • A complete dashboard with traces and metrics for the Wondrous App.

Try the Wondrous Online Demo

Experience the power of OpenTelemetry in a real Flutter application. Our demo app is fully instrumented and connected to Dartastic.io.

The Wondrous app showcases how Dartastic.io can help you monitor your application in real-time, including:

  • Route navigation tracking
  • Performance metrics
  • Error catching and reporting
  • User interactions
Launch Demo View Documentation
COMING SOON
Wondrous Demo App

Real-Time Dashboard

See how the demo app's telemetry data looks in Dartastic.io's dashboard.

Distributed Tracing

View end-to-end traces from client to server, with detailed information about each span, including timing, attributes, and relationships.

View Example
Performance Metrics

Track key performance indicators such as app startup time, screen load times, and APDEX scores, all in real-time.

View Example
Error Tracking

Capture and analyze errors with full stack traces, context, and related spans to quickly identify and fix issues.

View Example

How the Demo is Instrumented

Just a few lines of code can add powerful observability to your Flutter app.

main.dart
import 'package:flutter/material.dart';
import 'package:flutterrific_opentelemetry/flutterrific_otel.dart';
import 'package:Wondrous_app/app.dart';

void main() {
  // Set up error handlers
  FlutterError.onError = (FlutterErrorDetails details) {
    FlutterOTel.reportError('FlutterError', details.exception, details.stack);
    if (kDebugMode) {
      FlutterError.dumpErrorToConsole(details);
    }
  };

  // Initialize OpenTelemetry
  runZonedGuarded(() async {
    WidgetsFlutterBinding.ensureInitialized();
    
    // Get device info for better telemetry
    final deviceInfo = await DeviceInfoPlugin().androidInfo;
    final packageInfo = await PackageInfo.fromPlatform();
    
    // Initialize OpenTelemetry SDK
    await FlutterOTel.initialize(
      serviceName: 'Wondrous-demo',
      serviceVersion: packageInfo.version,
      tracerName: 'ui',
      dartasticAPIKey: 'demo-key-123',
      resourceAttributes: {
        DeviceSemantics.deviceId.key: deviceInfo.id,
        DeviceSemantics.deviceModel.key: deviceInfo.model,
        DeviceSemantics.deviceOsVersion.key: deviceInfo.version.release,
        AppInfoSemantics.appVersion.key: packageInfo.version,
      }
    );
    
    // Run the app
    runApp(WondrousApp());
  }, (error, stack) {
    FlutterOTel.reportError('Uncaught Error', error, stack);
  });
}

The complete source code for the demo is available on GitHub (coming soon).

Ready to add observability to your app?

Get started with our free tier and discover how easy it is to implement OpenTelemetry in your Flutter and Dart applications.

Get StartedView Documentation