onboarding_sdk 0.1.0
onboarding_sdk: ^0.1.0 copied to clipboard
Flutter package for interactive feature tours and onboarding experiences
Onboarding SDK - Flutter Feature Tour Package #
A Flutter package for creating interactive feature tours and onboarding experiences in your app. Guide users through your UI with customizable tooltips and highlights.
Features #
- 🎯 Interactive Tours: Create step-by-step guides for UI features
- 🖌️ Customizable: Style highlights and tooltips to match your app's theme
- 💾 Persistence: Remember completed tours using shared preferences
- 📱 Responsive: Works with any screen size and orientation
- 🔁 Navigation: Next/previous/skip controls for tour progression
Installation #
Add to your pubspec.yaml:
dependencies:
onboarding_sdk: ^0.1.0
Run flutter pub get
Usage #
Basic Setup #
import 'package:onboarding_sdk/onboarding_sdk.dart';
final tourController = TourController(
steps: [
TourStep(
key: myButtonKey,
title: 'Action Button',
description: 'Tap here to perform the main action',
),
// Add more steps...
],
tourId: 'main_tour',
);
Starting a Tour #
FloatingActionButton(
onPressed: () => tourController.startTour(context),
child: Icon(Icons.help),
);
Customizing Appearance #
TourStep(
key: settingsKey,
title: 'Settings Menu',
description: 'Configure your app preferences here',
overlayColor: Colors.black.withOpacity(0.6),
highlightColor: Colors.blue,
borderRadius: BorderRadius.circular(8),
);
API Reference #
TourController #
| Property | Description |
|---|---|
startTour() |
Starts the tour from the first step |
nextStep() |
Advances to the next tour step |
previousStep() |
Returns to the previous tour step |
skipTour() |
Skips the entire tour |
endTour() |
Completes and ends the tour |
TourStep #
| Property | Description | Default |
|---|---|---|
key |
GlobalKey of target widget | Required |
title |
Step title text | Required |
description |
Step description text | Required |
overlayColor |
Background dim color | Colors.black54 |
highlightColor |
Highlight border color | Colors.white |
borderRadius |
Border radius of highlight | BorderRadius.circular(4) |
Contributing #
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a new feature branch
- Implement your changes
- Add tests for your changes
- Submit a pull request
License #
This project is licensed under the MIT License - see the LICENSE file for details.