flutter anchored onboarding screen

build

License: MIT

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

GitHub

View Github