🎯 in_app_tutorial

🚀 A powerful and elegant Flutter package for creating stunning in-app tutorials with overlay highlights and step-by-step guided walkthroughs.

Perfect for onboarding new users or teaching existing users how to navigate your app with beautiful spotlighted widgets, engaging titles, and clear descriptions.

---

✨ Features

🎨 Beautiful Overlays - Create stunning translucent overlays with precise widget highlighting
🔍 Smart Spotlights - Highlight any widget by simply passing its GlobalKey
📝 Rich Content - Display engaging titles and descriptions for each tutorial step
🎯 Step Navigation - Seamlessly navigate through multiple tutorial steps
⚡ Simple Integration - Clean API that's easy to implement and customize
🎭 Flexible Design - Adapts to your app's theme and design language

---

🎬 Demo

Coming soon: GIF showcasing the tutorial in action

---

📦 Installation

Add in_app_tutorial to your pubspec.yaml:

dependencies:
  in_app_tutorial: ^0.0.1

Then install it:

flutter pub get

---

🚀 Quick Start

1️⃣ Import the package

import 'package:in_app_tutorial/in_app_tutorial.dart';

2️⃣ Create tutorial steps

final GlobalKey buttonKey = GlobalKey();

final tutorialController = TutorialController(
  steps: [
    TutorialStep(
      key: buttonKey,
      title: '🎯 Click the Button',
      description: 'This button starts the main action. Tap it to continue!',
    ),
    // Add more steps as needed
  ],
);

3️⃣ Wrap your widget

InAppTutorial(
  controller: tutorialController,
  child: YourAppWidget(),
)

4️⃣ Add GlobalKey to target widgets

ElevatedButton(
  key: buttonKey, // 👈 This makes the button highlightable
  onPressed: () {
    // Your button logic here
  },
  child: Text('Start Action'),
)

5️⃣ Start the tutorial

// Call this method to begin the tutorial
tutorialController.startTutorial();

---

💡 Complete Example

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

class TutorialExample extends StatelessWidget {
  final GlobalKey buttonKey = GlobalKey();
  final GlobalKey fabKey = GlobalKey();
  final GlobalKey<InAppTutorialState> tutorialKey = GlobalKey<InAppTutorialState>();

  @override
  Widget build(BuildContext context) {
    return InAppTutorial(
      key: tutorialKey,
      controller: TutorialController(
        steps: [
          TutorialStep(
            key: buttonKey,
            title: '👋 Welcome!',
            description: 'This is your main action button. Tap it to get started!',
          ),
          TutorialStep(
            key: fabKey,
            title: '🔄 Need Help?',
            description: 'Use this button to restart the tutorial anytime.',
          ),
        ],
      ),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Tutorial Demo'),
          backgroundColor: Colors.blue,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.lightbulb,
                size: 80,
                color: Colors.amber,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                key: buttonKey,
                onPressed: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Button pressed! 🎉')),
                  );
                },
                style: ElevatedButton.styleFrom(
                  padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
                ),
                child: Text('Click Me'),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          key: fabKey,
          onPressed: () => tutorialKey.currentState?.startTutorial(),
          backgroundColor: Colors.green,
          child: Icon(Icons.help),
        ),
      ),
    );
  }
}

---

🎨 Customization

Tutorial Step Options

TutorialStep(
  key: yourWidgetKey,
  title: 'Step Title',
  description: 'Detailed description of what this step does',
  // Add more customization options as they become available
)

Controller Methods

final controller = TutorialController(steps: yourSteps);

// Start the tutorial
controller.startTutorial();

// Skip to next step
controller.nextStep();

// Go to previous step  
controller.previousStep();

// End tutorial
controller.endTutorial();

---

🛠️ API Reference

Classes

Class	Description
InAppTutorial	Main widget that wraps your app content
TutorialController	Controls tutorial flow and state
TutorialStep	Represents a single tutorial step

Properties

Property	Type	Description
controller	TutorialController	Controls the tutorial steps and navigation
steps	List<TutorialStep>	List of tutorial steps to display
key	GlobalKey	Key of the widget to highlight
title	String	Title text for the tutorial step
description	String	Description text for the tutorial step

🏷️ Keywords

flutter tutorial onboarding walkthrough guide overlay highlight spotlight ux ui