Flutter Tutorial Overlay #

A customizable Flutter widget for creating interactive app tutorials and onboarding experiences. This package allows you to highlight specific UI elements and display informative tooltips to guide users through your app's features.

Features #

• 🎯 Target Highlighting: Highlight any widget using GlobalKey
• 💬 Customizable Tooltips: Rich tooltips with titles, descriptions, and action buttons
• 🎨 Flexible Styling: Customize colors, borders, blur effects, and button styles
• 📱 Responsive Design: Automatically positions tooltips to fit screen boundaries
• 🔄 Step-by-Step Navigation: Navigate through multiple tutorial steps
• ⚡ Easy Integration: Simple setup with minimal code

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_tutorial_overlay: ^1.0.0

Then run:

flutter pub get

Quick Start #

1. Import the package

import 'package:flutter_tutorial_overlay/flutter_tutorial_overlay.dart';

2. Create GlobalKeys for your target widgets

final GlobalKey _buttonKey = GlobalKey();
final GlobalKey _menuKey = GlobalKey();

3. Assign keys to your widgets

ElevatedButton(
  key: _buttonKey,
  onPressed: () {},
  child: Text('Target Button'),
)

4. Create tutorial steps and show the overlay

void _startTutorial() {
  final steps = [
    TutorialStep(
      targetKey: _buttonKey,
      title: "Welcome!",
      description: "This is your main action button. Tap it to perform the primary action.",
    ),
    TutorialStep(
      targetKey: _menuKey,
      title: "Menu",
      description: "Access additional options and settings from this menu.",
    ),
  ];

  final tutorial = TutorialOverlay(
    context: context,
    steps: steps,
    onComplete: () {
      print('Tutorial completed!');
    },
  );

  tutorial.show();
}

Advanced Usage #

Customization Options #

TutorialOverlay(
  context: context,
  steps: steps,
  // Tooltip styling
  tooltipBackgroundColor: Colors.white,
  tooltipBorderRadius: 12.0,
  tooltipMaxWidth: 300.0,
  tooltipPadding: EdgeInsets.all(16.0),

  // Text styling
  titleTextColor: Colors.black87,
  descriptionTextColor: Colors.black54,

  // Highlight styling
  highlightRadius: 8.0,
  highlightBorderWidth: 2.0,
  highlightBorderColor: Colors.blue,
  targetPadding: 8.0,

  // Overlay styling
  blurSigma: 6.0,
  blurOpacity: 20,
  overlayTint: Color(0x8A000000),

  // Button customization
  nextButtonStyle: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
  ),
  skipButtonStyle: ElevatedButton.styleFrom(
    backgroundColor: Colors.grey,
  ),
  finishButtonStyle: ElevatedButton.styleFrom(
    backgroundColor: Colors.green,
  ),

  // Button text
  nextText: "Continue",
  skipText: "Skip Tour",
  finishText: "Done",

  // Behavior
  dismissable: true,
  showButtons: true,

  // Callbacks
  onNext: () => print('Next step'),
  onSkip: () => print('Tutorial skipped'),
  onFinish: () => print('Tutorial finished'),
  onComplete: () => print('Tutorial completed'),
);

Hiding Buttons #

You can create a tap-to-continue tutorial by hiding the buttons:

TutorialOverlay(
  context: context,
  steps: steps,
  showButtons: false,
  dismissable: true, // Allow tap anywhere to continue
);

API Reference #

TutorialStep #

TutorialOverlay #

Examples #

Check out the /example folder for a complete sample app demonstrating various features and customization options.

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Support #

If you find this package helpful, please give it a ⭐ on GitHub!

For issues and feature requests, please visit our issue tracker.