Adding guides to a Flutter app

Install the package, wrap widgets in GuideAnchor, name your routes, and run the same guide on iOS, Android and web.

Add the package

Terminal

flutter pub add playstep

Start it and wrap your app

Dart

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await PlayStep.init(appKey: 'ps_pub_dev_your_key');
  runApp(MaterialApp(
    builder: PlayStep.builder,
    navigatorObservers: [PlayStep.navigatorObserver],
    home: const InvoicesScreen(),
  ));
}

Anchor the widgets your guide points at

Dart

GuideAnchor(
  id: 'new-invoice-btn',
  child: FloatingActionButton(onPressed: create, child: const Icon(Icons.add)),
)

Use the same anchor ids as your web app and one guide runs on both. Set the guide's platforms to Web and Flutter.

Name your routes

page_view triggers match route names:

Dart

Navigator.push(context, MaterialPageRoute(settings: const RouteSettings(name: '/invoices/new'), builder: (_) => const NewInvoiceScreen()));

Run it

Publish the guide to development and run the app. The guide card follows its anchor through scrolls and rotations, and the Android back button closes it like a dialog.

Offline

The SDK keeps the last config it loaded, so guides work offline. Clips that are not cached show their poster and text.

Embeds

YouTube and Vimeo clips play inline with the optional playstep_embeds package; see the Flutter reference.