explain_features_tutorial #

A lightweight Flutter package to visually guide users through your app by highlighting specific widgets step-by-step. Perfect for onboarding flows or feature discovery. Easily explain parts of your UI using customizable overlays and animations — no native dependencies, and it's very light. The reason i made this package, the ones on pub.dev were extremely slow on the web and on low-resources devices also crashed all the time.

Features #

• 🔍 Highlight any widget using its GlobalKey
• ✨ Smooth fade and slide-in animations for guidance
• 🧭 Step-by-step navigation through key UI elements
• ❌ Optional cancel button to skip the tutorial
• 🧱 100% Flutter — no platform channels or native code
• 📦 Lightweight and easy to integrate

Getting started #

To start using explain_features_tutorial, simply add it to your pubspec.yaml:

dependencies:
  explain_features_tutorial: ^0.0.7

Then run:

    flutter pub get

and import the package where needed:

import 'package:explain_features_tutorial/explain_features_tutorial.dart';

Usage #

Wrap your app (or a specific screen) with ExplainFeaturesTutorial and pass in:

• a list of GlobalKeys for the widgets you want to highlight
• matching widgetExplainerText to describe each widget

Here's a minimal example:

final GlobalKey<State<StatefulWidget>> buttonKey = GlobalKey();
final GlobalKey<State<StatefulWidget>> textKey = GlobalKey();

final List<GlobalKey<State<StatefulWidget>>> allKeys = [
  buttonKey,
  textKey,
];

ExplainFeaturesTutorial(
  widgetKeys: allKeys,
  widgetExplainerText: const [
    'This is the action button',
    'This is some important text',
  ],
  child: Scaffold(
    appBar: AppBar(
      actions: [
        IconButton(
          key: buttonKey,
          icon: Icon(Icons.star),
          onPressed: () {},
        ),
      ],
    ),
    body: Center(
      child: Text(
        'Welcome!',
        key: textKey,
        style: TextStyle(fontSize: 20),
      ),
    ),
  ),
);

Additional information #

This package was built to provide a lightweight, customizable way to guide users through your Flutter app’s features — especially useful for walkthroughs. If you run into any bugs or want to suggest improvements, feel free to reach on my website for help. More customization options and enhancements (like tooltips, shapes, or progress indicators) may be added in future updates.