flutter_walkthrough_sdk 0.0.2

A lightweight in-app onboarding and walkthrough SDK for Flutter with spotlight highlights and tooltips.

example/lib/main.dart

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


void main() {
  runApp(const MyApp());
}

/// Keys used by walkthrough
final GlobalKey buttonKey = GlobalKey();
final GlobalKey searchKey = GlobalKey();
final GlobalKey profileKey = GlobalKey();
final GlobalKey menuKey = GlobalKey();

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {


  void _startTour() {
    PreviewSDK.start(
      context,
      steps: [
        PreviewStep(
          targetKey: buttonKey,
          isBottom: false,
          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",
        ),
      ],
      config: const PreviewConfig(
        confirmText: "Next",
        cancelText: "Skip",
        doneText: "Finish",
        showCounter: true,
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const Drawer(
        child: Center(child: Text("Menu Items Here")),
      ),

      /// APP BAR
      appBar: AppBar(
        title: const Text("Walkthrough SDK Demo"),
        actionsPadding: .symmetric(horizontal: 20),
        leading: IconButton(
          key: menuKey,
          icon: const Icon(Icons.menu),
          onPressed: () => Scaffold.of(context).openDrawer(),
        ),
        actions: [
          IconButton(
            key: searchKey,
            icon: const Icon(Icons.search),
            onPressed: () {},
          ),
          IconButton(
            key: profileKey,
            icon: const Icon(Icons.person),
            onPressed: () {},
          ),
        ],
      ),

      /// BODY
      body: Center(
        child: ElevatedButton(
          key: buttonKey,
          onPressed: () {},
          style: ElevatedButton.styleFrom(
            padding: const EdgeInsets.symmetric(
              horizontal: 40,
              vertical: 18,
            ),
          ),
          child: const Text(
            "Start",
            style: TextStyle(fontSize: 18),
          ),
        ),
      ),

      /// Restart tour button (for testing)
      floatingActionButton: FloatingActionButton(
        onPressed: _startTour,
        child: const Icon(Icons.play_arrow),
      ),
    );
  }
}