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
Comments are closed.