burbly_onboarding 1.0.0

A premium, highly customizable onboarding package for Flutter apps. Features smooth page transitions, gradient backgrounds, Lottie animation support, pulsing CTA buttons, and a BLoC-powered state mana [...]

example/lib/main.dart

// ignore_for_file: avoid_print

import 'package:flutter/material.dart';
import 'package:burbly_onboarding/burbly_onboarding.dart';

void main() {
  runApp(const ExampleApp());
}

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Burbly Onboarding Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorSchemeSeed: const Color(0xFF667eea),
        useMaterial3: true,
      ),
      home: const OnboardingDemoScreen(),
    );
  }
}

class OnboardingDemoScreen extends StatelessWidget {
  const OnboardingDemoScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return BurblyOnboarding(
      pages: [
        // Page 1: Icon illustration (default)
        const OnboardingPageModel.icon(
          headline: 'Learn Smarter, Not Harder',
          description:
              'Master any subject with scientifically-proven spaced repetition '
              'that adapts to your learning pace.',
          gradientColors: [Color(0xFF667eea), Color(0xFF764ba2)],
          iconData: Icons.menu_book_rounded,
          iconGradient: [Colors.orange, Colors.deepOrange],
          semanticLabel: 'Book icon representing smart learning',
        ),

        // Page 2: Icon illustration
        const OnboardingPageModel.icon(
          headline: 'Track Your Progress',
          description:
              'Watch your knowledge grow with detailed statistics and insights '
              'that keep you motivated.',
          gradientColors: [Color(0xFFf093fb), Color(0xFFf5576c)],
          iconData: Icons.celebration_rounded,
          iconGradient: [Colors.pink, Colors.purple],
          semanticLabel: 'Celebration icon representing progress',
        ),

        // Page 3: Icon illustration
        const OnboardingPageModel.icon(
          headline: 'Study Anywhere, Anytime',
          description:
              'Your personalized study companion works offline and syncs '
              'across all your devices.',
          gradientColors: [Color(0xFF4facfe), Color(0xFF00f2fe)],
          iconData: Icons.self_improvement_rounded,
          iconGradient: [Colors.teal, Colors.blue],
          semanticLabel: 'Mindfulness icon representing studying anywhere',
        ),
      ],
      config: const OnboardingConfig(
        getStartedButtonText: 'Get Started',
        persistCompletion: false, // Disable for demo
      ),
      theme: const BurblyOnboardingTheme(
        headlineStyle: TextStyle(letterSpacing: -0.8),
      ),
      onCompleted: () {
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(builder: (_) => const HomeScreen()),
        );
      },
      onSkipped: () {
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(builder: (_) => const HomeScreen()),
        );
      },
      onPageChanged: (page) {
        print('Page changed to: $page');
      },
    );
  }
}

/// Simple home screen shown after onboarding.
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
        backgroundColor: const Color(0xFF667eea),
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(
              Icons.check_circle_rounded,
              color: Color(0xFF667eea),
              size: 80,
            ),
            const SizedBox(height: 24),
            Text(
              'Onboarding Complete! 🎉',
              style: Theme.of(context).textTheme.headlineSmall?.copyWith(
                    fontWeight: FontWeight.w700,
                  ),
            ),
            const SizedBox(height: 8),
            Text(
              'Welcome to the app.',
              style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                    color: Colors.grey[600],
                  ),
            ),
            const SizedBox(height: 32),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).pushReplacement(
                  MaterialPageRoute(
                    builder: (_) => const OnboardingDemoScreen(),
                  ),
                );
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(0xFF667eea),
                foregroundColor: Colors.white,
                padding: const EdgeInsets.symmetric(
                  horizontal: 32,
                  vertical: 16,
                ),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(28),
                ),
              ),
              child: const Text('Replay Onboarding'),
            ),
          ],
        ),
      ),
    );
  }
}