showcasescreen

License: MIT pub package

A powerful and customizable Flutter package to showcase and highlight widgets step-by-step. Perfect for onboarding tours and feature discoveries.

pub.dev | GitHub Repository

Preview

The example app running on mobile

Features

  • 🎯 Widget Highlighting: Focus users' attention on specific UI elements.
  • 🛠 Highly Customizable: Control tooltips, overlays, padding, and animations.
  • 📜 Auto-Scrolling: Automatically scrolls to the target widget if it's off-screen.
  • 🏗 Custom Tooltips: Use default tooltips or build your own from scratch.
  • ⏯ Multi-Step Tours: Easily manage sequences of showcases.
  • 📱 Platform Support: Works across Android, iOS, Web, and Desktop.

Getting Started

1. Installation

Add to your pubspec.yaml:

dependencies:
  showcasescreen: <latest-version>

2. Usage

Initialize the Showcase

Register the showcase controller and wrap your widgets:

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey _one = GlobalKey();

  @override
  void initState() {
    super.initState();
    // 1. Register the showcase view
    ShowcaseScreen.register();
    
    // 2. Start tour after frame is rendered
    WidgetsBinding.instance.addPostFrameCallback((_) {
      ShowcaseScreen.get().startShowCase([_one]);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Showcase(
          key: _one,
          title: 'Welcome',
          description: 'This is a showcased widget.',
          child: Icon(Icons.star),
        ),
      ),
    );
  }
}

Documentation

For advanced usage, including custom tooltip builders, action buttons, and global configurations, check out the Full Documentation.

Example App

Check out the example directory for a complete "Music App" demonstration featuring complex layouts and nested showcases.

License

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

Libraries

showcasescreen