Flutter Walkthrough SDK 🚀 #

A lightweight, customizable in-app onboarding / walkthrough / coachmark SDK for Flutter.

Highlight UI elements, guide users with tooltips, and show step-by-step tours with a clean spotlight overlay.

Perfect for: ✔ Feature discovery
✔ First-time onboarding
✔ Tutorials
✔ Coach marks
✔ Product tours

✨ Features #

✅ Spotlight highlight on any widget
✅ Step counter (1/5)
✅ Dynamic titles & descriptions
✅ Custom button text (Next / Skip / Done)
✅ First-time only display
✅ Fully configurable UI
✅ Lightweight (no heavy dependencies)
✅ Works with any Flutter app
✅ Simple API
✅ Production ready

📦 Installation #

flutter pub add flutter_walkthrough_sdk

🚀 Quick Start #

Step 1: Create GlobalKey #

final buttonKey = GlobalKey();

Step 2: Assign key to widget #

ElevatedButton(
  key: buttonKey,
  onPressed: () {},
  child: const Text("Start"),
)

Step 3: Assign your walkthrough #

final steps = [
  PreviewStep(
    targetKey: buttonKey,
    title: "Start Button",
    description: "Tap this button to start your journey",
  ),

  PreviewStep(
    targetKey: searchKey,
    title: "Search",
    description: "Search anything from here",
  ),

  PreviewStep(
    targetKey: profileKey,
    title: "Profile",
    description: "Manage your profile settings",
  ),

  PreviewStep(
    targetKey: menuKey,
    title: "Menu",
    description: "Access all features from this menu",
  ),
];

🧩 Call it where you wanted to show only for first time #

PreviewSDK.startIfFirstTime(
  context,
  id: "home_tour",
  steps: steps,
);

🎨 Custom Configuration only for first time #

PreviewSDK.startIfFirstTime(
  context,
  id: "home_tour",
  steps: steps,
  config: const PreviewConfig(
    showCounter: true,
    confirmText: "Next",
    cancelText: "Skip",
    doneText: "Finish",
  ),
);

Start walkthrough #

PreviewSDK.start(
  context,
  steps: steps,
);