Skip to main content
Supported on: iOS SDK 1.0.61+ · Android SDK 1.0.33+ · Flutter SDK 1.0.3+
The AppDNA Flutter SDK delivers full onboarding parity through native platform rendering. The onboarding module lets you present server-driven onboarding flows that are configured in the AppDNA Console, with native UI primitives on each platform — SwiftUI on iOS, Jetpack Compose on Android. Flows are delivered to the SDK via the remote config bundle, so you can update onboarding experiences without shipping app updates.

Present an Onboarding Flow

Present a specific onboarding flow by ID. The method returns a Future that completes once the native flow surface is shown:
If the flow ID is unknown to the SDK or the remote config bundle has not finished loading, the call returns immediately as a no-op and a debug-level log entry is emitted.
The Flutter API takes the flow ID as a positional argument. To present the active flow configured in remote config from the AppDNA Console, the canonical pattern is to pick an explicit flow ID at the call site — the Console controls which flow is active by toggling published flows.

Module Access

Access the onboarding module directly to use additional methods like setDelegate and to pass an OnboardingContext:

Module Methods

The static AppDNA.presentOnboarding(flowId) is a convenience that calls AppDNA.onboarding.present(flowId) with no context.

OnboardingContext

Pass additional context when presenting a flow:
The experimentOverrides parameter is intended for development and QA only. In production, experiment variants are assigned automatically by the AppDNA backend.

Paywalls inside onboarding flows

Steps with outcome: present_paywall open a paywall and route the user based on the result (purchase / fail / dismiss → next step). The host’s AppDNAPaywallDelegate (registered via AppDNA.paywall.setDelegate(...)) fires for these embedded paywalls identically to standalone presentations — purchase, restore, action, and post-purchase callbacks all reach the host. See the Flutter paywall docs for the full delegate surface.

AppDNAOnboardingDelegate

Implement the AppDNAOnboardingDelegate abstract class to receive onboarding flow lifecycle events. The delegate fires for every step transition and at flow completion / dismissal. For server-driven async hooks that can block or redirect step advancement, see Async Step Hooks below.

Set the Delegate

Example Implementation

Step Types

Onboarding flows support the following step types, configured in the AppDNA Console:
Step types and their content are defined entirely in the Console. The SDK renders them natively — you do not need to build UI for individual step types from Flutter.

Selection Modes

Question steps support two selection modes:

Content Blocks

Each onboarding step is composed of content blocks that control the visual layout. Blocks are configured in the Console and rendered natively on each platform. The block string the Console emits is the same string the native SDK switches on. The following block types are available:

Layout primitives

Interactive blocks

Form input blocks

Form inputs are individual blocks (not a single form block). Each input type emits its current value through the step’s inputValues map and is included in the step responses on completion.
Blocks are configured entirely in the Console. The SDK renders them automatically — no Dart code is needed unless you want to register a host-provided custom view (see Custom View Registration below).

Advanced blocks

Available on iOS SDK 1.0.67+ / Android SDK 1.0.39+.
A batch of richer, interactive blocks render through the native layer on both platforms: These wrap the native renderers — see the iOS and Android onboarding docs for each block’s field_config fields and for the onElementInteraction hook that powers the interactive ones.

Button Actions

button and social_login blocks emit a structured payload when tapped. The action value on the button (configured in the Console) determines what shape the payload takes and lets you route to the right backend call (sign in, register, request OTP, etc.). If the user has not completed required form fields on the step, the native SDK shows an inline validation toast and does not emit the action — same gate as the standard next button.

Flow control

Authentication entry

When the user taps a button with one of these actions, the SDK calls your onBeforeStepAdvance handler with the payload below. Show a “Signing in…” spinner by returning {'type': 'block', 'message': …} while async auth runs, then return {} (proceed) / {'type': 'proceedWithData', 'data': {...}} when the backend responds.
If you do not implement AppDNAOnboardingDelegate, the SDK stays on the step and logs a warning rather than advancing past credential collection. Auth actions require a host to perform the actual side effect (sign in, register, send OTP, …) — silently advancing would leak credentials into the response bundle without ever calling your backend.

Account lifecycle

request_otp channel resolution

request_otp and verify_otp include a channel field so your handler knows which delivery method to call back on. The SDK resolves it in this order:
  1. Explicit — set the button’s action_value to "sms", "email", "whatsapp", or "voice" in the Console (case-insensitive).
  2. Auto-detect — if the step has exactly one phone-typed input (input_phone) → channel: "sms"; exactly one email-typed input (input_email) → channel: "email".
  3. Omitted — if the step has both an email AND a phone input (or neither), the channel key is absent from the payload. Check with stepData?['channel'] as String? and fail explicitly if null rather than guessing. Set action_value on the button to disambiguate.
The matching input field’s value is included as recipient so you don’t have to look it up from the step responses.

Handling auth actions

The advance hook returns a plain map (there is no StepAdvanceResult Dart class). Recognized shapes:
Existing next, skip, link, permission, and social_login button actions are unchanged. Host apps that already implement AppDNAOnboardingDelegate keep working without changes — the default onBeforeStepAdvance returns {} (proceed), so flows that don’t switch on stepData?['action'] advance normally. Host apps that have NO delegate set will see the no-delegate warning above when an auth action fires; for those flows, either implement the delegate or keep using next as the button action.

Custom View Registration

custom_view blocks are rendered by a host-native view registered on each platform, not by a Dart widget — the Flutter plugin is a thin wrapper and does not host a Flutter surface inside the native onboarding step. There is no AppDNA.registerCustomView(...) in the Dart API. Register the view on the native side and reference its identifier from the custom_view block in the Console:
  • iOS — register a SwiftUI/UIKit view factory with the native AppDNA SDK in your AppDelegate.
  • Android — register a native view factory with the AppDNA SDK in your Application.
The identifier used at registration must match the custom view identifier configured in the Console for the custom_view block.

Block Styling

Every content block supports a block_style design token that controls appearance properties such as padding, margin, background color, corner radius, border, shadow, and opacity. Block styles are configured in the Console and applied automatically by the native renderers.

Visibility Conditions

Blocks can be shown or hidden based on user responses, bindings, or device attributes. Visibility conditions are configured per-block in the Console using rules like answer_equals, binding_not_empty, platform_is, and locale_matches. The native SDK evaluates conditions client-side before rendering each block.

Entrance Animations

Each block supports an entrance animation that plays when the block first appears. Animations are configured per-block in the Console. Supported animation types include fade, slide_up, slide_down, slide_left, slide_right, scale, flip, and bounce. You can configure duration, delay, and easing curve.

Form Steps

The form step type provides native input fields for collecting structured user data. Each form can contain multiple fields with validation, conditional visibility, and custom configuration. Fields are rendered using native iOS controls (UIKit / SwiftUI) and native Android controls (Jetpack Compose).

Supported Input Types

Field Validation

Form fields support built-in and custom validation:
  • Required fields — marked in the Console, the SDK prevents advancing until filled.
  • Regex patterns — custom validation (e.g., ^[A-Z]{2}\d{4}$ for a code format).
  • Min/max values — for number, slider, and stepper fields.
  • Max length — for text and textarea fields.

Conditional Fields

Fields can depend on other fields using depends_on rules. For example, a “Company name” field can appear only when the user selects “Employed” in a previous field. Supported operators: equals, not_equals, contains, not_empty, empty, gt, lt, is_set.

Form Responses

Form field values are included in the responses map passed to onOnboardingCompleted, keyed by step ID. Each step’s value is a map of field ID to field value.

Location Fields

The location field type provides an autocomplete search input that returns structured location data including city, state, country, coordinates, and timezone. When the user starts typing (e.g., “New York”), the native SDK debounces the input (300ms), calls the AppDNA geocoding proxy, and displays a dropdown of suggestions. The user selects a result and the SDK stores the complete structured data.

Location Data Structure

Each location selection contains:

Accessing Location Data

Location data is returned as a nested map in the responses payload to onOnboardingCompleted:

Template Engine

Location data is accessible in dynamic content templates rendered by the native SDK:

Configuration in Console

In the onboarding flow editor, add a location field to a form step and configure:
Location autocomplete uses a server-side proxy — no third-party SDK is added to your app binary. The geocoding provider (Mapbox by default) can be configured in Settings > Geocoding.

Interactive Chat Steps

The interactive_chat step type renders a conversational UI that forwards each user message to your webhook and renders the reply. This is how you integrate your own LLM, agent, or rule-based backend into an onboarding flow.

How it works

  1. User types a message in the chat step.
  2. The native SDK POSTs the conversation payload to the webhook_url configured in the Console (with any custom headers you set).
  3. Your server responds with JSON in the schema below.
  4. The native SDK renders the AI reply, quick-reply buttons, media, etc.
Turn limits, typing indicators, ratings, and quick-reply routing are handled by the native SDK — your webhook only needs to return the next reply. The conversation never round-trips through Dart.

Request payload (SDK → your webhook)

Your headers are forwarded verbatim. For bearer-token APIs, set the header value to Bearer YOUR_TOKEN (the SDK does not add the Bearer prefix automatically). The context object is opaque session state you control — whatever you returned in data on a previous turn gets echoed back here on every subsequent call. This is how you integrate threaded AI backends (OpenAI Assistants, hosted LLMs with threadId, etc.) without replaying the full history on every request. context is absent on turn 1 (your server hasn’t written anything yet) and accumulates across turns; later values overwrite earlier ones per-key (last-write-wins). See Threaded backends below for the full pattern.

Response schema (your webhook → SDK)

Only messages[].content is required — every other field is optional. The SDK reads messages[] to render chat bubbles, so if you omit it or return a different shape, the reply won’t render.
Returning a response like {"reply": "..."} without wrapping it in the messages array will silently fail — the SDK decodes unknown fields as null and shows nothing. Always wrap your reply in messages[{ "content": "..." }].

Full response schema

Unknown fields in your response are ignored, so you can also include your own server-side state at the top level (it just won’t round-trip — use data for anything you want back).

Minimal working example

Node.js (Express):

Threaded backends: round-tripping session state

If your AI service uses a thread/session handle (OpenAI Assistants API, a hosted LLM with conversation memory, or any third-party AI proxy that mints a session id), do not replay the full conversation history on every turn — latency and cost grow linearly with conversation length. Instead, return your session handle in data once; the SDK accumulates it and echoes it back in context on every subsequent turn. The wire contract in plain English:
  • You write to context by returning fields under data in any response.
  • You read from context off req.body.context on every request after the first.
  • Keys are merged across turns; later values overwrite earlier ones per-key.
  • The SDK never inspects or mutates context — it’s opaque to your server. You choose the keys and the shape.
Example: integrating a threaded AI service keyed by threadId. If your backend rotates the thread (expiry, failure, migration), just return the new id in data — the SDK overwrites the cached value and uses it on the next turn automatically.
No server-side session store, no per-user cache, no history replay. The context round-trip IS your session storage.
The same pattern works for anything opaque you need per-conversation: API rate-limit bucket IDs, A/B cohort labels, tool-call state, reasoning scratchpads — whatever your AI backend needs to resume, stash it in data and read it from context on the next turn.

Console configuration

In the onboarding flow editor, add a step of type Interactive Chat, then set:

Auto-tracked events

The standard onboarding step events (onboarding_step_viewed, onboarding_step_completed) also fire for chat steps.

Async Step Hooks

The onboarding delegate supports two async hooks that let you intercept step transitions for server-side validation, dynamic content loading, or custom routing logic.

onBeforeStepAdvance

Called before the SDK advances to the next step. Return a Future<Map<String, dynamic>> describing what happens next (there is no StepAdvanceResult Dart class):

Advance result map

Use stay for “I handled it; keep the user here”
Return a stay map when your hook handled the user’s action — for example, sent a password-reset email — and you want the user to remain on the same step. This is distinct from block (error styling) and from proceed (advances).

onBeforeStepRender

Called before a step is rendered. Return a Future<Map<String, dynamic>?> config-override map to dynamically modify the step’s content, or null for no override (there is no StepConfigOverride Dart class):
Recognized keys in the override map: fieldDefaults, title, subtitle, ctaText, layoutOverrides. The SDK merges these into the step config before rendering.
Both hooks are async — the SDK shows a loading indicator while waiting for your response. If either hook throws an error or times out, the SDK proceeds normally.

Row Direction and Distribution

The row content block supports configurable direction and distribution, set in the Console:

Button Gradients

Buttons support gradient backgrounds configured in the Console: Gradients override the solid background_color when set.

Select Display Styles

input_select form-input blocks (and select form fields) support three display styles: The display style is configured per select field in the Console under field_config.display_style. Question-step option lists always render in a fixed grid layout; the styles above apply specifically to input_select / select.

Progress Bar Custom Colors

The progress_bar content block supports custom color configuration: Colors are configured per block in the Console. When not set, the SDK uses the app’s primary theme color.

Per-Step Progress Visibility

The progress indicator can be hidden on specific steps while still counting them in the total progress. This is useful for splash screens, permission prompts, or transition steps where the progress bar would be distracting. Configure hide_progress per step in the Console under Step Design > Logic. When enabled, the progress bar is hidden on that step but the step still contributes to the overall progress calculation (e.g., step 3 of 5 still advances progress to 60%).
This is a per-step override of the flow-level show_progress setting. If show_progress is false at the flow level, the progress bar is hidden on all steps regardless of hide_progress.

Conditional Branching

Onboarding flows support conditional branching — the next step can change based on the user’s answer. Branching is configured entirely in the Console. Example:
To configure branching:
  1. In the Console, open your onboarding flow (Onboarding > Flows).
  2. On a question step, click Add branching rule.
  3. Map each answer option to a target step.
  4. The SDK handles routing automatically — no Dart code needed.
All answers (including branched paths) are returned in the responses map in onOnboardingCompleted.

Auto-Tracked Events

The native SDK automatically tracks the following onboarding-related events: Each event includes the flowId, stepId, and stepIndex where applicable.

Configuration in Console

Onboarding flows are managed in the AppDNA Console:
  1. Navigate to Onboarding > Flows.
  2. Create a new flow or edit an existing one.
  3. Add steps (welcome, question, value_prop, form, interactive_chat, custom) and configure their content.
  4. Set targeting rules to control which users see the flow.
  5. Publish the flow to make it available to the SDK via the config bundle.
Flows must be published in the Console before they appear in the SDK. Draft flows are not delivered to client devices.

Full Example

Paywall trigger nodes — entitlement-aware skip + restore behavior

Onboarding flows can include paywall_trigger graph nodes that present a paywall in the middle of a flow and route the user via per-outcome targets (on_success_target, on_fail_target, on_dismiss_target). Triggers are configured in the AppDNA Console and the SDK presents them automatically when the flow reaches the node.

Entitlement-aware skip (default ON)

Each paywall_trigger node carries a skip_if_subscribed flag (default true). When the native SDK reaches the trigger, it checks the user’s entitlement state first:
  • User has an active subscription → SDK skips presentation, emits an onboarding_paywall_skip event with reason=user_already_subscribed, and routes the flow via the configured skip target (see below).
  • User has no active subscription → SDK presents the paywall as before; outcome routing is unchanged.
This stops returning users from seeing a paywall they already paid for. Already-subscribed users move past the trigger silently. If you sell upsell paywalls (a higher tier to a user who already owns the base plan), open the trigger in the onboarding flow editor and uncheck Skip if user already has an active subscription. The trigger then always presents.
Existing flows authored before this version require no migration: nodes without the field default to true at read time. From Flutter you can check the same entitlement state used by the gate via:

Subscribed-user skip routing — picking the target

The console editor exposes a dedicated dropdown directly under the Skip if user already has an active subscription toggle: When skipped (user is already subscribed), go to. Four options: The native SDKs resolve the target with this chain at runtime: on_subscribed_skip_target → falls back to on_success_target → falls back to “follow downstream edge”. The fallback means flows authored without an explicit skip target that worked around this by setting on_success_target = complete_flow continue to behave identically.

Warning callout in the editor

If you open a paywall_trigger that has Skip if user already has an active subscription on but the resolved skip target is “Follow downstream edge” and the next node in the graph is another paywall_trigger, the editor displays an inline warning:
Heads up: this paywall is set to skip for subscribed users, but the next step is another paywall trigger — subscribed users will still see it. Set “When skipped” to “Complete flow” to bypass the rest of the paywall chain.
One click on Complete flow in the dropdown clears the warning and fixes the chain. This is the most common authoring trap with multi-paywall flows (main paywall → winback paywall → end); the warning surfaces it before publish.

Restore now auto-dismisses + routes to success

Tapping Restore Subscription on a paywall now:
  1. Fires onPaywallRestoreCompleted(paywallId, restoredProductIds) on your AppDNAPaywallDelegate.
  2. Auto-dismisses the native paywall surface when restoredProductIds is non-empty (i.e., the restore actually found entitlements).
  3. Routes the onboarding flow via the trigger’s on_success_target — same path as a real purchase.
When the restore call succeeds but finds NO entitlements (restoredProductIds: []) the paywall stays up so the user can attempt a fresh purchase or close manually.

Hosts that handle their own dismiss

If your onPaywallRestoreCompleted handler already dismisses the paywall itself (e.g., to show a “Restored — tap continue when ready” overlay), the SDK’s internal dispatchedDismiss guard ensures the auto-dismiss never fires twice — the first caller wins. onPaywallDismissed fires exactly once regardless of who triggered the dismissal.
Synchronous host-side dismisses inside the delegate body always win the race.

AppDNA.identify(userId) refreshes the entitlement cache

When you call AppDNA.identify(...) after the user signs in, the native SDK silently refreshes its entitlement cache in the background. The next paywall_trigger gate then reflects the identified user’s StoreKit / Play Billing subscriptions instead of the prior anonymous user’s empty entitlement state.
If your app completes auth out-of-band (SSO callback, OAuth web flow) and you need the entitlement cache refreshed manually, call AppDNA.identify(...) again with the same user ID — the cache refresh is idempotent.

Migration risk callout

Behavioral change: paywall_trigger nodes now skip presentation for subscribed users by default. If your app intentionally relies on the legacy “always present” behavior (e.g., a confirmation / legal-acceptance screen rendered as a paywall), open the trigger node in the console editor and uncheck Skip if user already has an active subscription.
Web-side entitlements (Stripe subscriptions, manually-granted entitlements via web tooling) are NOT consulted by this gate today — only StoreKit (iOS) and Play Billing (Android) entitlements are. If your premium users have only web-side subscriptions, leave Skip if user already has an active subscription unchecked, or implement a host-side gate via AppDNAOnboardingDelegate.onBeforeStepRender that consults your own backend.

Measurement mode (wheel_picker)

wheel_picker supports an optional measurement mode for capturing a weight, height, temperature, or any custom quantity with a unit toggle. Enable it in the console by setting a measurement type (Weight, Height, Temperature, or Custom) on the wheel picker. When set, the picker renders with:
  • a unit toggle (e.g. kg ⇄ lbs, cm ⇄ in, °C ⇄ °F) that converts the value live, and
  • a measurement visual styleruler (tick tape), gauge (radial dial), dial (rotary drum), or wheel (classic drum).
Each unit defines its own range and step; toggling converts the current value and re-clamps it to the new unit’s range.

Reported value

The SDK stores the value in the base unit (the first unit you define) so it stays stable when the user flips units. Alongside it, the SDK reports the chosen unit and the displayed value: The element-interaction callback receives { value, display_value, unit }, where value is the base-unit value. When no measurement type is set, wheel_picker behaves exactly as before.