in_app_tutorial 0.0.1
in_app_tutorial: ^0.0.1 copied to clipboard
A Flutter package for simple in-app tutorial overlays with highlights.
🎯 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