playstep 0.5.1
playstep: ^0.5.1 copied to clipboard
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.
PlayStep for Flutter #
Playable, video-first guides for your Flutter app. Each step shows a few seconds of exactly what to do, spotlights the real widget, and checks itself off when the user does it.
import 'package:playstep/playstep.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await PlayStep.init(appKey: 'ps_pub_xxx');
runApp(MaterialApp(
builder: PlayStep.builder, // draws guides above every route
navigatorObservers: [PlayStep.navigatorObserver], // route names start screen guides
home: const InvoicesScreen(),
));
}
// Mark the widgets your guides point at:
GuideAnchor(id: 'new-invoice-btn', child: FilledButton(onPressed: create, child: const Text('New')));
// Report your own events (they start guides and complete `event` steps):
PlayStep.track('invoice_page_opened');
Other calls: PlayStep.identify(userId, traits), PlayStep.start(guideId), PlayStep.complete(stepId),
PlayStep.page(screen), PlayStep.openLauncher() (the list of guides people can replay, from your own menu),
PlayStep.resetProgress([guideId]) (let guides start again, keeping the user), PlayStep.reset() (on sign-out).
- Pure Dart, no native code of its own; four runtime dependencies.
- Init never blocks the UI thread; offline it uses the last cached config and shows posters for uncached clips.
- Fails silent: if PlayStep cannot load, your app behaves as if it were not installed.
- Looks like your app: guides wear the brand kit set in the dashboard (colours, corners, and your own font when it is
in your pubspec), and follow your app's theme into dark mode and back (
MaterialApp.themeMode, aCupertinoApp's brightness).PlayStep.init(colorMode:)andPlayStep.setColorMode()override that. - YouTube and Vimeo clips play inline with the optional
playstep_embedspackage.