Flutter SDK

Integrate OnboardSync with your Flutter application

Installation

Add OnboardSync to your Flutter project:

pubspec.yaml

dependencies:
  onboardsync: ^0.1.0

Then run:

flutter pub get

Setup

iOS Configuration

Add required permissions to your Info.plist based on your onboarding flow:

<!-- Camera permission -->
<key>NSCameraUsageDescription</key>
<string>This app needs camera access for profile photos</string>

<!-- Photo library permission -->
<key>NSPhotoLibraryUsageDescription</key>
<string>This app needs photo library access to select images</string>

<!-- Location permission -->
<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs location access to provide local features</string>

<!-- Notifications permission (handled automatically by SDK) -->

Android Configuration

Ensure internet permission in AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

Basic Usage

import 'package:onboardsync/onboardsync.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    _showOnboarding();
  }

  Future<void> _showOnboarding() async {
    // Show onboarding flow
    OnboardSync.showOnboarding(
      context,
      projectId: 'your-project-id',
      secretKey: 'your-secret-key', // Get from dashboard
      onComplete: (result) {
        // Onboarding completed - access form responses
        if (result != null && result.hasResponses) {
          for (final response in result.responses) {
            print('${response.questionText}: ${response.answer}');
          }
        }
        
        // Navigate to main app
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(builder: (_) => MainScreen()),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }
}

Configuration Options

OnboardSync.showOnboarding(
  context,
  projectId: 'your-project-id',
  secretKey: 'your-secret-key',
  testingEnabled: true,     // Optional, shows onboarding every time
  onComplete: (result) {    // Optional callback with form responses
    // Access form responses and navigate
    if (result != null) {
      print('Got ${result.responseCount} responses');
    }
  },
);

context · BuildContext · required

The build context for navigation

projectId · string · required

Your project ID from the OnboardSync dashboard

secretKey · string · required

Your secret key from the OnboardSync dashboard (found in API Keys section)

testingEnabled · bool · default: "false"

Enable testing mode to show onboarding every time (ignores completion status)

onComplete · OnboardingCompleteCallback

Callback function called when onboarding completes, receives optional OnboardingResult with form responses

API Reference

showOnboarding()

Display the onboarding flow:

static Future<void> showOnboarding(
  BuildContext context, {
  required String projectId,
  required String secretKey,
  bool testingEnabled = false,
  OnboardingCompleteCallback? onComplete,
}) async

This is the main method to display onboarding. It handles:

• Checking if onboarding should be shown
• Fetching the appropriate flow configuration
• Displaying the WebView with the onboarding content
• Managing completion status
• Handling permissions and app ratings

OnboardingResult

Contains all form responses from a completed onboarding flow:

class OnboardingResult {
  final String flowId;                      // The completed flow ID
  final List<OnboardingResponse> responses; // All form responses
  
  // Helper methods
  OnboardingResponse? getResponseByQuestion(String questionText);
  List<OnboardingResponse> get textResponses;
  List<OnboardingResponse> get singleChoiceResponses;
  List<OnboardingResponse> get multipleChoiceResponses;
  bool get hasResponses;
  int get responseCount;
}

OnboardingResponse

A single question response:

class OnboardingResponse {
  final String questionText;  // The question asked
  final String questionType;  // 'question_text', 'question_single_choice', or 'question_multiple_choice'
  final dynamic answer;       // String or List<String>
  final String? screenId;     // Screen where question appeared
  
  String? get answerAsString; // Get answer as single string
  List<String> get answerAsList; // Get answer as list
}

Completion Handling

The SDK automatically tracks when users complete or skip onboarding. The onComplete callback receives an optional OnboardingResult:

onComplete: (result) {
  if (result != null && result.hasResponses) {
    // Access user's answers
    final nameResponse = result.getResponseByQuestion("What's your name?");
    print('User name: ${nameResponse?.answerAsString}');
  }
}

Advanced Usage

Permission Handling

The SDK automatically handles permission requests configured in your onboarding flow:

// Permissions are requested based on your flow configuration
// No additional code needed - the SDK handles:
// - Camera permission
// - Photo library permission
// - Location permission
// - Notifications permission
// - Contacts permission

Testing Mode

Enable testing mode to show onboarding every time:

OnboardSync.showOnboarding(
  context,
  projectId: 'your-project-id',
  secretKey: 'your-secret-key',
  testingEnabled: true, // Shows onboarding every time for testing
  onComplete: () {
    // Handle completion
    print('Onboarding completed!');
  },
);

Testing & Development

For testing, you can reset the onboarding status:

// Clear stored completion status (for testing)
import 'package:shared_preferences/shared_preferences.dart';

Future<void> resetOnboardingForTesting() async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.remove('onboardsync_completed');
  await prefs.remove('onboardsync_device_id');
}

Troubleshooting

Onboarding not showing

1. Verify your project ID is correct
2. Check network connectivity
3. Enable logging to see detailed errors
4. Ensure the flow is published in the dashboard

WebView issues on iOS

Make sure you’ve added the NSAppTransportSecurity configuration to Info.plist

Blank screen appears

Check that your base URL is correct and the server is accessible

Example App

Check out our Flutter example app for a complete implementation.

Next Steps

API Reference

Explore the REST API

Best Practices

Learn flow design tips