in_app_tutorial 0.0.1 copy "in_app_tutorial: ^0.0.1" to clipboard
in_app_tutorial: ^0.0.1 copied to clipboard

A Flutter package for simple in-app tutorial overlays with highlights.

🎯 in_app_tutorial #

License: MIT Flutter

🚀 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
copied to clipboard

Then install it:

flutter pub get
copied to clipboard

🚀 Quick Start #

1️⃣ Import the package #

import 'package:in_app_tutorial/in_app_tutorial.dart';
copied to clipboard

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
  ],
);
copied to clipboard

3️⃣ Wrap your widget #

InAppTutorial(
  controller: tutorialController,
  child: YourAppWidget(),
)
copied to clipboard

4️⃣ Add GlobalKey to target widgets #

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

5️⃣ Start the tutorial #

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

💡 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),
        ),
      ),
    );
  }
}
copied to clipboard

🎨 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
)
copied to clipboard

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();
copied to clipboard

🛠️ 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

1
likes
110
points
90
downloads

Publisher

unverified uploader

Weekly Downloads

2024.08.26 - 2025.07.21

A Flutter package for simple in-app tutorial overlays with highlights.

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on in_app_tutorial