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.2.0
List of helpers
| Name | description | status |
|---|---|---|
| Mr Rwema | 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
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);">
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, 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 |
|---|---|---|
| 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 |
|
| 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 E-mail [email protected]
122 Dec 22, 2022
6 Jun 20, 2022
1 Oct 29, 2021
2 Feb 6, 2022
0 May 6, 2022
405 Dec 31, 2022
49 Oct 7, 2021
34 Nov 12, 2022
3 Jul 11, 2022
24 Oct 7, 2022