pal_widgets 0.2.0 copy "pal_widgets: ^0.2.0" to clipboard
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 #

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,
    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 or email gautier[@@]pal-plugin.tech

45
likes
120
pub points
67%
popularity

Publisher

unverified uploader

A set of amazing onboarding widgets for your flutter applications.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

collection, flutter

More

Packages that depend on pal_widgets