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.0.1+4
List of helpers
| Name | description | status |
|---|---|---|
| AnchoredHelper | An helper do describe another widget of your page. This creates an overlay above your page | ✅ |
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.
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
Text(
'$_counter',
key: HelperOrchestrator.of(context).generateKey('text1'),
),
Example
You can now show an anchored helper using
final helper = AnchoredHelper(
anchorKeyId: 'text1',
title: const Text('Title lorem pitume'),
description: const Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum'),,
bgColor: Colors.blue,
negativText: const Text('cancel'),
positivText: const Text('Ok, understood'),
onError: () => print("widget not found"),
positivBtnStyle: helperOutlineBtnStyle,
negativeBtnStyle: helperOutlineBtnStyle,
onNegativTap: () => HelperOrchestrator.of(context).hideHelper(),
onPositivTap: () => HelperOrchestrator.of(context).hideHelper(),
onTapAnchor: () => 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 |
|---|---|---|
| anchorKeyId | The reference to the [Key] created by [HelperOrchestrator] | ✅ |
| title | A Text widget to show as title | |
| description | A Text widget to show as description | |
| bgColor | A Color as Overlayed background | ✅ |
| negativText | A [Text] widget to show within the negativ button | |
| positivText | A [Text] widget to show within the positiv button | |
| onPositivTap | Action on tap positiv button | |
| onNegativTap | Action on tap negativ button | |
| onError | Functions to call when widgets encounters any errors | |
| negativeBtnStyle | Material style to put on negativ button | |
| positivBtnStyle | 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 AnchoredHoleHelper.anchorFactory which creates a full overlay with an animated hole |
Any question?
Contact us on our twitter or email gautier[@@]pal-plugin.tech
