https://github.com/Apparence-io/pal-widgets
A collection of widgets for making amazing onboarding experience in your flutter applications
https://github.com/Apparence-io/pal-widgets
flutter flutter-plugin onboarding
Last synced: 6 months ago
JSON representation
A collection of widgets for making amazing onboarding experience in your flutter applications
- Host: GitHub
- URL: https://github.com/Apparence-io/pal-widgets
- Owner: Apparence-io
- License: mit
- Created: 2021-11-05T13:24:29.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-10-30T15:38:12.000Z (11 months ago)
- Last Synced: 2025-03-30T18:01:44.290Z (6 months ago)
- Topics: flutter, flutter-plugin, onboarding
- Language: Dart
- Homepage: https://pub.dev/packages/pal_widgets
- Size: 10.7 MB
- Stars: 34
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Pal widgets
A flutter package for better onboarding.
A set of amazing onboarding widgets for your flutter applications.
## Install package
add in your pubspec.yaml dependencies
```pal-widgets: 0.3.0```
----
## List of helpers
| Name | description | status |
|----------------|----------------------------------------------|-----------|
| AnchoredHelper | An helper do describe another widget of your page. This creates an overlay above your page | :white_check_mark: |
## Anchored helper
This widgets is highly inspired by google onboardings. This shows a circle around any widgets you want and add an overlay were you can add
a message.
First embbed you page or your app with a **HelperOrchestrator** widget.
```dart
HelperOrchestrator(
child: Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ...
),
)
```
You now have to get a key *text1* for the widget you want to reference using
```dart
Text(
'$_counter',
key: HelperOrchestrator.of(context).generateKey('text1'),
),
```
### Example
You can now show an anchored helper using
```dart
final helper = AnchoredHelper(
title: const Text('Title lorem pitume'),
description: const Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum'),,
bgColor: Colors.blue,
leftBtnText: const Text('cancel'),
rightBtnText: const Text('Ok, understood'),
onError: () => print("widget not found"),
positivBtnStyle: helperOutlineBtnStyle,
negativeBtnStyle: helperOutlineBtnStyle,
onLeftBtnTap: () => HelperOrchestrator.of(context).hideHelper(),
onRightTap: () => HelperOrchestrator.of(context).hideHelper(),
onTapAnchor: () => HelperOrchestrator.of(context).hideHelper(),
);
// this will show an overlayed anchored widget using the key text1
HelperOrchestrator.of(context).showAnchoredHelper('text1', helper);
```
### properties
| Property | description | Required |
|--------------------|----------------------------------------------|-------------|
| title | A Text widget to show as title | |
| description | A Text widget to show as description | |
| bgColor | A Color as Overlayed background | :white_check_mark: |
| leftBtnText | A [Text] widget to show within the left button | |
| rightBtnText | A [Text] widget to show within the right button | |
| onLeftBtnTap | Action on tap left button | |
| onRightTap | Action on tap right button | |
| onError | Functions to call when widgets encounters any errors | |
| leftBtnStyle | Material style to put on negativ button | |
| rightBtnStyle | Material style to put on positiv button | |
| onTapAnchor | Action to call when user tap on anchor | |
| widgetFactory | The Widget factory to create the anchored helper. Default to AnchoredCircleHoleHelper.anchorFactory which creates a full overlay with an animated hole | |
There is two Hole Anchor widget factories :
- ```AnchoredCircleHoleHelper.anchorFactory```: creates a circle hole (default value)
- ```AnchoredRectHoleHelper.anchorFactory``` : creates a rectangle hole on strict widget bounds
## Any question?
Contact us on [our twitter](https://twitter.com/PalFlutter)