Install for Flutter

Add the playstep package, wrap your app with PlayStep.builder, and anchor guides to widgets with GuideAnchor.

Terminal

flutter pub add playstep

Start PlayStep before runApp, then add its builder and navigator observer to your app:

Dart

import 'package:flutter/material.dart';
import 'package:playstep/playstep.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await PlayStep.init(appKey: 'ps_pub_dev_your_key');
  runApp(const InvoicelyApp());
}

class InvoicelyApp extends StatelessWidget {
  const InvoicelyApp({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp(
        builder: PlayStep.builder,
        navigatorObservers: [PlayStep.navigatorObserver],
        home: const InvoicesScreen(),
      );
}

PlayStep.builder draws guides above every route and dialog. PlayStep.navigatorObserver reports route names as screen views, which page_view triggers match.

Anchor widgets

Wrap the widget a step points at:

Dart

GuideAnchor(
  id: 'new-invoice-btn',
  child: FilledButton(onPressed: createInvoice, child: const Text('New invoice')),
)

Identify users and report events

Dart

PlayStep.identify(user.id, {'plan': user.plan});
PlayStep.track('invoice_page_opened');

YouTube and Vimeo clips

Embedded clips play inline when you add the optional playstep_embeds package:

Terminal

flutter pub add playstep_embeds

Dart

await PlayStep.init(appKey: 'ps_pub_dev_your_key');
PlayStepEmbeds.register();

Without it, embed steps show the poster and open the video in the browser.

The package supports iOS, Android, web and desktop, and depends only on video_player, flutter_cache_manager, shared_preferences and http. Every API is in the Flutter reference.