Skip to content

SDK reference

Flutter

Every API of the playstep and playstep_embeds packages, with examples.

All PlayStep methods are static, safe to call before the config has loaded, and never throw into your app.

PlayStep.init

Starts the SDK. It returns quickly; the config loads in the background and the last good config is used offline.

Dart
await PlayStep.init(
  appKey: 'ps_pub_prod_your_key',
  locale: 'pt-BR',
  onEvent: (event) => analytics.log('playstep_${event['type']}', event),
);
ParameterDefaultWhat it does
appKeyrequiredYour publishable key.
apiBasehttps://cdn.playstep.appSelf-hosting and tests.
localeThe device localePicks the guide text.
onEventnoneCalled for every guide event.
confignoneUse this config instead of fetching one (preview mode).
previewfalseNothing is sent.
captureTokennoneStarts capture mode for Generate with AI. Also read from --dart-define=PLAYSTEP_CAPTURE=…, and from the capture link on Flutter web.
captureScreenshotsfalseAdds a small screenshot of each captured screen.

Capture mode

With a capture token, the SDK shows a small panel instead of guides. After Start capturing, each screen you open (reported by PlayStep.navigatorObserver or PlayStep.page) is read from the widget tree and sent to PlayStep: titles, the labels of buttons and fields, and how to find each widget again. What anyone typed is never read. Use it in a debug or profile build, never in a release you ship:

Terminal
flutter run --dart-define=PLAYSTEP_CAPTURE=cap_your_token

Steps created this way find their widgets without a GuideAnchor, by ValueKey, text, semantics label or tooltip. A GuideAnchor with the step's anchor id always wins.

PlayStep.builder

Draws guides above every route and dialog. Use it as your app's builder:

Dart
MaterialApp(builder: PlayStep.builder, home: const HomeScreen());

PlayStep.navigatorObserver

Reports route names as screen views for page_view triggers:

Dart
MaterialApp(navigatorObservers: [PlayStep.navigatorObserver], home: const HomeScreen());

GuideAnchor

Marks a widget as an anchor. Taps on it complete tap_anchor steps.

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

PlayStep.identify

Dart
PlayStep.identify(user.id, {'plan': 'pro'});

The id is hashed on the device before it is sent.

PlayStep.track

Dart
PlayStep.track('invoice_page_opened');

PlayStep.start

Dart
IconButton(icon: const Icon(Icons.help_outline), onPressed: () => PlayStep.start('create-first-invoice'));

PlayStep.complete

Dart
await saveClient();
PlayStep.complete('fill-client');

PlayStep.page

Reports a screen view yourself, for screens without named routes:

Dart
PlayStep.page('/invoices/new');

PlayStep.openLauncher

Dart
PlayStep.openLauncher();

PlayStep.reset

Forgets the user and their progress on this device. Call it on sign-out.

Dart
await PlayStep.reset();

Back button and keyboard

Android back and desktop Esc close an open guide card, like a dialog. Focus moves to the card for screen readers, and steps are announced.

playstep_embeds

Plays YouTube and Vimeo clips inline, in a web view, when the user taps them.

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

PlayStepEmbeds.embedUri returns the privacy-friendly embed URL for a YouTube or Vimeo link:

Dart
final uri = PlayStepEmbeds.embedUri('https://youtu.be/aqz-KE-bpKQ');

Search the docs and guides.

PlayStep is coming soon

We're opening PlayStep to teams one at a time. Leave your name and email and we'll set up a demo.

We use your email only to arrange the demo. See the privacy policy.