Onboarding Flow

Configurable onboarding pipeline with splash, naming, multi-select pills, custom steps, and reveal animation screens.

Installation

Screen Types

OnboardingStep is a sealed class with 5 variants that define the screens in your onboarding pipeline:

Step Type	Description
naming	Name input screen with animated suggestion pills the user can tap to auto-fill.
multiSelect	Grid of selectable option pills with staggered entrance animation. Collects multiple choices.
custom	Builder callback for arbitrary content. Use this for screens that don't fit the other types.
reveal	Gradient glow animation with typing effect that reveals the selected assistant name.
splash	Animated splash screen with pulse animation, typically used as the first step.

Configuration

OnboardingConfig accepts a list of OnboardingStep entries that define the pipeline order:

final config = OnboardingConfig(
  steps: [
    OnboardingStep.splash(
      title: 'Welcome to Atlas',
      subtitle: 'Your AI assistant',
    ),
    OnboardingStep.naming(
      prompt: 'Give your assistant a name',
      suggestions: ['Nova', 'Atlas', 'Sage', 'Echo'],
    ),
    OnboardingStep.multiSelect(
      title: 'What do you need help with?',
      options: ['Coding', 'Writing', 'Research', 'Math', 'Creative'],
      minSelections: 1,
      maxSelections: 3,
    ),
    OnboardingStep.custom(
      builder: (context, controller) => MyCustomWidget(),
    ),
    OnboardingStep.reveal(),
  ],
);

State Management

OnboardingController is the step navigation state machine. It tracks the current step index, collects results from each step (selected name, chosen options), and exposes navigation controls:

final controller = OnboardingController(config: config);

// Navigation
controller.currentStepIndex;  // int
controller.currentStep;       // OnboardingStep
controller.canGoBack;         // bool
controller.isLastStep;        // bool
controller.next();
controller.back();

// Collected results
controller.selectedName;      // String?
controller.selectedOptions;   // List<String>
controller.results;           // Map<int, dynamic>

Usage

final controller = OnboardingController(
  config: OnboardingConfig(steps: [
    OnboardingStep.naming(suggestions: ['Nova', 'Atlas', 'Sage']),
    OnboardingStep.multiSelect(
      title: 'What do you need help with?',
      options: ['Coding', 'Writing', 'Research'],
    ),
    OnboardingStep.reveal(),
  ]),
);

OnboardingFlowScreen(controller: controller)