pal_widgets 0.2.0 icon indicating copy to clipboard operation
pal_widgets: ^0.2.0 copied to clipboard

A set of amazing onboarding widgets for your flutter applications.

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 #

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

    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

    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'),,
    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 #

anchorKeyIdThe reference to the [Key] created by [HelperOrchestrator]
titleA Text widget to show as title
descriptionA Text widget to show as description
bgColorA Color as Overlayed background
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[@@]

pub points


unverified uploader

A set of amazing onboarding widgets for your flutter applications.

Repository (GitHub)


API reference


Icon for licenses.MIT (LICENSE)


collection, flutter


Packages that depend on pal_widgets