A collection of widgets for making amazing onboarding experience in your flutter applications

Overview

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

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); ">
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

You might also like...

A widget that displays a collection of dispersed and non-overlapping children

A widget that displays a collection of dispersed and non-overlapping children

flutter_scatter A widget that displays a collection of dispersed and non-overlapping children. Can be used to create word clouds: Features Built-in de

Sep 27, 2022

Various Flutter widgets that are developed by Google but not by the core Flutter team

Flutter widgets This repository contains the source code for various Flutter widgets that are developed by Google but not by the core Flutter team. Is

Jan 7, 2023

Flutter UI Widgets Flutter Package

Flutter UI Widgets Flutter Package This package makes different Flutter UI widgets implementation easy for you. Flutter UI Widgets The list of widgets

May 6, 2022

React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.

English | Português Flutter Hooks A Flutter implementation of React hooks: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 Ho

Dec 29, 2022

Flutter widgets and themes implementing the current macOS design language.

Flutter widgets and themes implementing the current macOS design language.

macos_ui Flutter widgets and themes implementing the current macOS design language. NOTE: This package depends on the excellent native_context_menu pl

Jan 7, 2023

Flutter Package for Easier Creation of Home Screen Widgets

Flutter Package for Easier Creation of Home Screen Widgets

Home Widget HomeWidget is a Plugin to make it easier to create HomeScreen Widgets on Android and iOS. HomeWidget does not allow writing Widgets with F

Dec 31, 2022

This repo is for anything that can be reusable in flutter like custom widgets 🟥, animations 🌟and more

Flutter Shortcuts This repo is for anything that can be reusable in flutter like custom widgets 🟥 , animations 🌟 and more. How to Use Just get the f

Dec 3, 2022

A basic Flutter app that includes some native Widgets like alerts, cards, avatars, animated container, inputs, etc.

A basic Flutter app that includes some native Widgets like alerts, cards, avatars, animated container, inputs, etc.

Flutter components This project was created with Flutter and some native Widgets like alerts, cards, avatars, animated container, inputs, etc. Getting

Nov 15, 2021

A Flutter package which provides helper widgets for selecting single or multiple account/user from the given list.

A Flutter package which provides helper widgets for selecting single or multiple account/user from the given list.

account_selector A Flutter package which provides helper widgets for selecting single or multiple account/user from a list Supported Dart Versions Dar

Oct 7, 2021
Comments
  • [Feature Request] Other shapes than circles

    [Feature Request] Other shapes than circles

    First of all thanks for providing such a great package :smile:.

    At this point in time the package seems to only support circles as outlines. This creates a visually unpleasing experience when trying to wrap non round elements, see image attached. It might be a great addition to support other Shapes/ and/or support a wrapping of the element.

    Screenshot from 2021-12-03 12-42-48

    enhancement 
    opened by jlnrrg 8
  • initState display multiple overlays after each other

    initState display multiple overlays after each other

    Lets say I have a list of onboardings, I'd like to spawn on initial display. Then I could use something like this:

    class _OnboardingFocusState extends State<_OnboardingFocus> {
      @override
      void initState() {
        super.initState();
    
        WidgetsBinding.instance?.addPostFrameCallback((Duration timeStamp) async {
          for (var element in widget.onboardings) {
            await HelperOrchestrator.of(context).showAnchoredHelper(
                element.anchoredKeyString, element.toAnchoredHelper(context));
          }
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return widget.child;
      }
    }
    

    Now I would assume the first overlay of the list to be displayed and then after the user dismisses it, the next to be displayed. Unfortunately this does not seem to be the case as only the last overview gets displayed

    help wanted 
    opened by jlnrrg 2
  • [Feature Request] Non obstructive hole

    [Feature Request] Non obstructive hole

    I do not know if this is even possible and would like to here your opinion on this. Lets take your example project. At this moment the overlay encapsulates the FAB button. If I try to hit the FAB button, the overlay vanishes.

    So my question is, would it be possible:

    1. to absorb the tab, so the overlay does not vanish (only on the cancel or confirm button)
    2. to pass the tab through, so the tab action is actually performed on the FAB.
    enhancement 
    opened by jlnrrg 2
Owner
Apparence.io
App development studio
Apparence.io
A new flutter package for collection of common popular social media widgets

Social Media Widgets - package A new flutter package for collection of common popular social media widgets Currently available widgets Snapchat screen

theboringdeveloper 34 Nov 12, 2022
Material io ext - A collection of extensions for creating widgets following material.io guidelines

material_io_ext It is a collection of extensions for creating widgets following

null 3 Jan 28, 2022
Making-form - A form design with dart programming and auto next facility

Making-form - A form design with dart programming and auto next facility

Munem Sarker 3 Nov 15, 2022
Flutter package: Assorted layout widgets that boldly go where no native Flutter widgets have gone before.

assorted_layout_widgets I will slowly but surely add interesting widgets, classes and methods to this package. Despite the package name, they are not

Marcelo Glasberg 122 Dec 22, 2022
Flutter-useful-widgets - Flutter Useful Widgets

useful_widgets This package makes it easy to build apps by providing a list of simple and useful widgets. import 'package:useful_widgets/useful_widget

Ricardo Crescenti 6 Jun 20, 2022
Custom widgets and utils using Flutter framework widgets and Dart language

reuse_widgets_and_utils The custom widgets and utils using Flutter framework widgets and Dart programming language. Getting Started This project is a

null 1 Oct 29, 2021
Widgets beginner - Widgets beginner with flutter

Widgets beginner - Widgets beginner with flutter

Tukhtamurodov Sardorbek 2 Feb 6, 2022
Code generation for Flutter Padding widgets based on your constants

Code generation for Flutter Padding widgets based on your constants

Emanuele 14 Oct 20, 2022
An extensive snap tool/widget for Flutter that allows very flexible snap management and snapping between your widgets.

An extensive snap tool/widget for Flutter that allows very flexible snap management and snapping between your widgets.

AliYigitBireroglu 101 Dec 16, 2022
A collection of pixel-perfect iOS-styled components and properties for Flutter, following the official guidelines.

cupertinew ⚠️ Experimental and work in progress ⚠️ A collection of pixel-perfect iOS-styled components and properties for Flutter, following the offic

null 30 Nov 10, 2022