pal 0.1.0 copy "pal: ^0.1.0" to clipboard
pal: ^0.1.0 copied to clipboard

discontinued
outdated

The no code Flutter onboarding editor

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 #

Param Type Description Required Default
childApp Widget your application.
navigatorKey GlobalKey<NavigatorState> a reference to the navigator key of your application childApp.navigatorKey
navigatorObserver PalNavigatorObserver used to manage state of current page childApp.navigatorObservers first entry
editorModeEnabled bool enable or Disable the editor mode true
textDirection TextDirection text direction of your application TextDirection.ltr
appToken String the 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