ShowCaseView Documentation

ShowcaseView supports multiple configuration scopes. This allows you to have different settings (e.g., for a 'profile' module vs the rest of the app).

Registering a Scope

Use the scope parameter in ShowcaseView.register() to define a unique configuration set.

Accessing a Scope

Use ShowcaseView.get(scope: 'your_scope_name') to control showcases within that specific scope.

Assigning a Showcase to a Scope

By default, Showcase widgets use the currently active scope. You can explicitly bind a Showcase widget to a specific scope using the scope parameter. This ensures the widget belongs to the correct scope even if multiple scopes are active in the same tree.

Warning: If multiple scopes are registered with the same name, the last one registered will override previous ones.

// Register a specific scope
ShowcaseView.register(
  scope: 'profile',
  // other configurations
)

// Control showcases in that scope
ShowcaseView.get(scope: 'profile').startShowCase([_one, _two, _three]);

// Explicitly assign a widget to a scope
Showcase(
  key: _profileKey,
  scope: 'profile',
  title: 'Profile',
  description: 'Your profile information',
  child: Icon(Icons.person),
),

To implement a basic showcase, follow these steps:

1. Register: Call ShowcaseView.register().
2. Define Keys: Create GlobalKey instances for each widget you want to highlight.
3. Wrap Widgets: Wrap your target widgets with the Showcase widget using the defined keys.
4. Start: Trigger the sequence using ShowcaseView.get().startShowCase([key1, key2, ...]).
5. Unregister: Call ShowcaseView.get().unregister() when the showcase is no longer needed (e.g., in dispose()).

Starting the Showcase

• On Button Press: Call startShowCase inside an onPressed callback.
• On Screen Load: Use WidgetsBinding.instance.addPostFrameCallback in initState to ensure the UI is rendered before starting.
• After Animation: Use startShowCase with the delay parameter inside a post-frame callback.

// 1. Register
ShowcaseView.register();

// 2. Define Keys
final GlobalKey _one = GlobalKey();
final GlobalKey _two = GlobalKey();

// 3. Wrap Widgets
Showcase(
  key: _one,
  title: 'Menu',
  description: 'Click here to see menu options',
  child: Icon(Icons.menu),
),

// 4. Start
void startShowcase() {
  ShowcaseView.get().startShowCase([_one, _two]);
}

// 5. Unregister
@override
void dispose() {
  ShowcaseView.get().unregister();
  super.dispose();
}

Version 5.x.x introduces a major change: it removes the dependency on BuildContext for controlling showcases and moves to an explicit registration lifecycle.

Key Changes:

1. No more ShowCaseWidget wrapper: You no longer need to wrap your page with ShowCaseWidget to provide context.
2. Use ShowcaseView.get(): Control showcases via the singleton instead of ShowCaseWidget.of(context).
3. Explicit Registration: Use ShowcaseView.register() to set up configurations.
4. Cleanup: Always call ShowcaseView.get().unregister() in your dispose() method to clean up.

// After (5.0.0+)
@override
void initState() {
  super.initState();
  // Register once
  ShowcaseView.register(
    autoPlayDelay: const Duration(seconds: 3),
    onStart: (index, key) => debugPrint('Started $index'),
  );

  WidgetsBinding.instance.addPostFrameCallback((_) {
    // Control via ShowcaseView.get()
    ShowcaseView.get().startShowCase([_one, _two]);
  });
}

@override
void dispose() {
  // Always unregister to clean up
  ShowcaseView.get().unregister();
  super.dispose();
}