flutter anchored onboarding screen


build License: MIT Pal widgets pubdev


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

Namedescriptionstatus
AnchoredHelperAn 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.

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,
    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

PropertydescriptionRequired
anchorKeyIdThe reference to the Key created by HelperOrchestrator:white_check_mark:
titleA Text widget to show as title
descriptionA Text widget to show as description
bgColorA Color as Overlayed background:white_check_mark:
leftBtnTextA Text widget to show within the left button
rightBtnTextA Text widget to show within the right button
onLeftBtnTapAction on tap left button
onRightTapAction on tap right button
onErrorFunctions to call when widgets encounters any errors
leftBtnStyleMaterial style to put on negativ button
rightBtnStyleMaterial style to put on positiv button
onTapAnchorAction to call when user tap on anchor
widgetFactoryThe 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 or email gautier@@pal-plugin.tech

Libraries

anchor_model
anchor_painter
anchored_circle_painter
anchored_helper_widget
anchored_rect_painter
animated_anchor
animated_circle
animated_rect
element_finder
helper_orchestrator
overlay_helper
pal_widgets
pop_anim