playstep 0.5.1

Playable, video-first guides for Flutter apps. Each step shows a short looping clip, spotlights the real widget and completes itself when the user does the action.

example/lib/main.dart

// Minimal PlayStep example: one anchored button and a guide started from your own event.
// flutter run --dart-define=PLAYSTEP_KEY=ps_pub_… [--dart-define=PLAYSTEP_API=http://localhost:8787]
import 'package:flutter/material.dart';
import 'package:playstep/playstep.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await PlayStep.init(
    appKey: const String.fromEnvironment('PLAYSTEP_KEY', defaultValue: 'ps_pub_dev_example'),
    apiBase: const String.fromEnvironment('PLAYSTEP_API', defaultValue: 'https://cdn.playstep.app'),
  );
  runApp(const ExampleApp());
}

/// The example app.
class ExampleApp extends StatelessWidget {
  /// Creates the example app.
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'PlayStep example',
        builder: PlayStep.builder,
        navigatorObservers: [PlayStep.navigatorObserver],
        home: Scaffold(
          appBar: AppBar(title: const Text('Invoices')),
          body: Center(
            child: GuideAnchor(
              id: 'new-invoice-btn',
              child: FilledButton(onPressed: () {}, child: const Text('New')),
            ),
          ),
          floatingActionButton: FloatingActionButton.extended(
            onPressed: () => PlayStep.track('invoice_page_opened'),
            label: const Text('Show me how'),
          ),
        ),
      );
}