pal logo

Pal - The Flutter onboarding editor (beta)

Pal is the onboarding editor dedicated to Flutter apps 📱.

Pal introduction in video

What does it mean ?

No code editor for all your app screens directly in your app:

  • 🏄‍♂️ Go to a screen where you want to add helper.
  • 🎛 Select your helper type.
  • 🎨 Select and customize your theme.

👀  Preview

camerawesome_example1

🧐  How it works ?

Pal is splitted in two modes:

  • Editor, used to create & manage helpers.
  • Client, all created helpers was displayed here.

Editor mode flow

  1. 🚣‍♂️ Navigate to the screen you want to show your helper.
  2. 🚧 Create the helper you want.
  3. 🚀 Publish !

Client mode flow

  1. 📲 Fetch all onboarding on application start.
  2. 🎛 Trigger an onboarding each time we detect anything that you configured for.
  3. 🙈 Don't show an helper again if user has already seen it.

That's it !

🚀  Getting started

  • Create an administration account here.

  • Create a new project in your dashboard.

  • Get your token & save it for later.

token
  • Add Pal dependency
dependencies:
  ...
  pal: ^latest_version
  • Import Pal in the main.dart
import 'package:palplugin/palplugin.dart';
  • Wrap your app with Pal
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final _navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return Pal(
      editorModeEnabled: true,
      appToken: 'REPLACE_WITH_YOUR_APP_TOKEN',
      // --------------------
      // YOUR APP IS HERE
      child: MaterialApp(
        navigatorKey: _navigatorKey,
        navigatorObservers: [PalNavigatorObserver.instance()],
        home: YourApp(),
      ),
      // --------------------
    );
  }  
}

🎥  Youtube Videos

✨  Parameters

ParamTypeDescriptionRequiredDefault
childAppWidgetyour application.
navigatorKeyGlobalKey<NavigatorState>a reference to the navigator key of your applicationchildApp.navigatorKey
navigatorObserverPalNavigatorObserverused to manage state of current pagechildApp.navigatorObservers first entry
editorModeEnabledboolenable or Disable the editor modetrue
textDirectionTextDirectiontext direction of your applicationTextDirection.ltr
appTokenStringthe app token created from the admin

😎  Client mode

helpers_client

Some of helpers displayed in the client app

🚧  Editor mode

💡  Helpers creation

helper_box

Simple box helper

helper_update

Update helper

helper_anchored

Anchored helper

helper_full_screen

FullScreen helper

🎨  Edit mode

helper_edit

Edit an helper

🙋‍♂️🙋‍♀️  Questions

Why I'm getting an error PageCreationException: EMPTY_ROUTE_PROVIDED when creating a new helper?

When you push a new route, you always need to give it an unique name if you use .push(....).

We recommend you to use .pushNamed(...) method (by using it, Pal know automatically the route name without specified it). But if you prefer using .push(...) instead, you have to create RouteSettings like this:

Navigator.push(
  context,
  MaterialPageRoute(
    settings: RouteSettings(
      name: 'page1', // <- Type here an unique route name
    )),
    builder: (context) => YourNewPage(),
);

📣  Author


Initiated and sponsored by Apparence.io.

✨  More

📑 Full documentation

🌍 Official website

Libraries

i18n
pal