To build an in-app Flutter UI tutorial / feature spotlight (step-by-step overlays highlighting parts of the UI), these Flutter packages are commonly used and well-suited:
⭐ showcaseview
Best match for your example
Package: showcaseview
Pub.dev: https://pub.dev/packages/showcaseview
Why it fits:
- Step-by-step coach marks
- Highlights specific widgets
- Tooltip cards with Next / Back
- Dims the background
- Very similar to your screenshot UX
Key features:
- Sequential steps
- Custom tooltip UI
- Supports shapes (circle, rectangle)
- Good for onboarding & feature discovery
⭐ tutorial_coach_mark
Very popular & flexible
Package: tutorial_coach_mark
Pub.dev: https://pub.dev/packages/tutorial_coach_mark
Why use it:
- Highly customizable overlays
- Smooth animations
- Full control over tooltip content
Good for:
- Complex UI walkthroughs
- Custom positioning & styling
⭐ flutter_intro
Simple & clean
Package: flutter_intro
Pub.dev: https://pub.dev/packages/flutter_intro
Pros:
- Minimal setup
- Declarative step configuration
- Lightweight
Cons:
- Less customizable than showcaseview
- Simpler visuals
⭐ coachmaker
Modern alternative
Package: coachmaker
Pub.dev: https://pub.dev/packages/coachmaker
Pros:
- Nice API
- Good animation support
- Flexible overlays
Cons:
- Smaller community
🏆 Recommendation
For a tutorial exactly like your screenshot (multi-step, highlighted search bar, back/next buttons):
👉 Use showcaseview