Setting Up the Introduction SDK

What you'll learn

• Generating the Introduction SDK with onboarding flow
• Customizing welcome, feature highlights, and get-started pages
• Persisting first-launch state to skip intro on subsequent launches
• Connecting the intro flow to your navigation graph

Prerequisites

• An existing Archipelago monorepo (see Monorepo Scaffolding)

Step 1: Generate the Introduction SDK

archipelago generate introduction_sdk

You will be prompted for:

• appName — MyApp (must match your monorepo app name)
• isForMonorepo — true (uses workspace path resolution)

Or use a config file:

{
  "appName": "MyApp",
  "isForMonorepo": true
}

archipelago generate introduction_sdk --config intro_config.json

Step 2: Understand the Generated Structure

features/
└── introduction_sdk/
    └── lib/src/
        ├── introduction_sdk.dart         # FeatureSDK entry point
        ├── data/
        │   ├── datasources/              # Local storage for first-launch flag
        │   └── repositories/             # Repository implementation
        ├── di/                           # Scoped DI registration
        ├── domain/
        │   ├── repositories/             # Repository contract
        │   └── usecases/                 # Check/set first-launch state
        ├── presentation/
        │   └── ui/pages/
        │       ├── welcome_page.dart     # App welcome screen
        │       ├── highlights_page.dart  # Feature highlights carousel
        │       └── get_started_page.dart # CTA to sign up or log in
        └── router/                       # Intro route definitions

Step 3: Register the Introduction Feature

import 'package:introduction_sdk/introduction_sdk.dart';

FeatureRegistry.register(IntroductionSdk());

Step 4: Customize Onboarding Pages

Replace the placeholder content with your app's branding:

// introduction_sdk/lib/src/presentation/ui/pages/highlights_page.dart
final highlights = [
  HighlightItem(
    title: 'Track Your Progress',
    description: 'See your growth over time with beautiful charts.',
    asset: 'assets/images/highlight_1.svg',
  ),
  HighlightItem(
    title: 'Stay Connected',
    description: 'Share achievements with friends and family.',
    asset: 'assets/images/highlight_2.svg',
  ),
];

Step 5: First-Launch Detection

The SDK persists a flag so the intro only shows once:

// In your router guard or redirect logic
final hasSeenIntro = await introRepository.hasCompletedIntro();
if (!hasSeenIntro) {
  return '/intro';
}
return '/home';

Common Customizations

Customization	Where to Change
Number of onboarding pages	highlights_page.dart — add/remove items
Skip button behavior	welcome_page.dart — modify skip action
Animation transitions	presentation/ui/ — page transition widgets
Branding and assets	Replace placeholder SVGs in assets
Reset intro state	domain/usecases/ — add ResetIntroUseCase

Next Steps

• Set up Auth for the sign-up flow after onboarding
• Configure the UI Kit to theme onboarding pages