Flutter Onboarding Kit 📱

A comprehensive Flutter package for onboarding and app introduction flows with customizable page views, indicators, and animations.

Features ✨

• 📄 Customizable Pages: Image, title, subtitle with flexible layouts
• 🎯 Page Indicators: Dots, numbers, or custom indicators
• 🎮 Smart Controller: Programmatic navigation and state management
• 🎨 Beautiful Buttons: Primary, secondary, text, and icon buttons
• 📱 Platform Adaptive: Automatically adapts to iOS and Android design patterns
• 🎭 Smooth Animations: Customizable page transitions and animations
• ♿ Accessibility Ready: Proper semantic structure and screen reader support
• 🌍 Localization Ready: All text is customizable for different languages
• ⚡ Performance Optimized: Efficient page rendering and memory management

Installation 📦

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_onboarding_kit: ^1.0.0

Then run:

flutter pub get

Usage 🚀

Basic Onboarding Flow

import 'package:flutter_onboarding_kit/flutter_onboarding_kit.dart';

class MyOnboardingScreen extends StatefulWidget {
  @override
  _MyOnboardingScreenState createState() => _MyOnboardingScreenState();
}

class _MyOnboardingScreenState extends State<MyOnboardingScreen> {
  late OnboardingController _controller;

  final List<OnboardingData> _pages = [
    OnboardingData(
      image: 'assets/images/welcome.png',
      title: 'Welcome!',
      subtitle: 'Discover amazing features and get started with your journey.',
      backgroundColor: Colors.blue,
    ),
    OnboardingData(
      image: 'assets/images/features.png',
      title: 'Features',
      subtitle: 'Explore all the powerful features our app has to offer.',
      backgroundColor: Colors.green,
    ),
    OnboardingData(
      image: 'assets/images/get_started.png',
      title: 'Get Started',
      subtitle: 'You\'re all set! Start using our app and enjoy the experience.',
      backgroundColor: Colors.orange,
    ),
  ];

  @override
  void initState() {
    super.initState();
    _controller = OnboardingController(
      pages: _pages,
      onPageChanged: (index) => print('Page $index'),
      onCompleted: () => _navigateToMainApp(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // Page View
          Expanded(
            child: OnboardingPageView(
              pages: _pages,
              controller: _controller.pageController,
              onPageChanged: _controller.updateCurrentPage,
            ),
          ),
          
          // Page Indicator
          OnboardingIndicator(
            currentPage: _controller.currentPage,
            totalPages: _controller.totalPages,
            style: IndicatorStyle.dots,
            activeColor: Colors.blue,
            inactiveColor: Colors.grey,
          ),
          
          // Navigation Buttons
          Padding(
            padding: EdgeInsets.all(16),
            child: Row(
              children: [
                // Skip Button
                OnboardingButton(
                  text: 'Skip',
                  type: OnboardingButtonType.text,
                  onPressed: _controller.skipToEnd,
                ),
                
                Spacer(),
                
                // Next/Get Started Button
                OnboardingButton(
                  text: _controller.isLastPage ? 'Get Started' : 'Next',
                  type: OnboardingButtonType.primary,
                  onPressed: _controller.isLastPage 
                      ? _controller.complete 
                      : _controller.nextPage,
                  icon: _controller.isLastPage ? Icons.check : Icons.arrow_forward,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  void _navigateToMainApp() {
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => MainAppScreen()),
    );
  }
}

Custom Page Content

OnboardingData(
  image: 'assets/images/custom.png',
  title: 'Custom Page',
  subtitle: 'This page has custom content',
  customContent: Column(
    children: [
      // Your custom widgets here
      Container(
        height: 200,
        color: Colors.purple,
        child: Center(child: Text('Custom Content')),
      ),
      Text('Custom Title', style: TextStyle(fontSize: 24)),
      Text('Custom Subtitle'),
    ],
  ),
)

Advanced Controller Usage

OnboardingController(
  pages: _pages,
  onPageChanged: (index) {
    print('Current page: $index');
    // Update UI based on current page
  },
  onCompleted: () {
    // Navigate to main app
    Navigator.pushReplacement(context, ...);
  },
  onNext: (page) {
    // Handle next page navigation
    print('Navigated to page $page');
  },
  onPrevious: (page) {
    // Handle previous page navigation
    print('Navigated back to page $page');
  },
  validator: (currentPage, targetPage) {
    // Custom validation logic
    if (targetPage > currentPage && !_isPageValid(currentPage)) {
      return false; // Prevent navigation
    }
    return true; // Allow navigation
  },
)

Custom Styling

OnboardingPageView(
  pages: _pages,
  imageHeight: 0.6, // 60% of screen height
  titleHeight: 0.2, // 20% of screen height
  spacing: 32.0,
  padding: EdgeInsets.all(24),
  imageAlignment: Alignment.center,
  textAlignment: TextAlign.center,
  titleStyle: TextStyle(
    fontSize: 28,
    fontWeight: FontWeight.bold,
    color: Colors.white,
  ),
  subtitleStyle: TextStyle(
    fontSize: 16,
    color: Colors.white70,
  ),
  enableAnimations: true,
  animationDuration: Duration(milliseconds: 500),
)

Widgets 📱

OnboardingData

Data model for onboarding page content with image, title, subtitle, and styling options.

OnboardingPage

Individual onboarding page widget with customizable layout and animations.

OnboardingPageView

PageView widget that displays multiple onboarding pages with smooth scrolling.

OnboardingIndicator

Page indicator widget with dots, numbers, or custom styles.

OnboardingButton

Customizable button widget for navigation (Next, Skip, Get Started, etc.).

OnboardingController

Controller for managing onboarding flow state, navigation, and completion.

Dependencies 📋

• flutter: SDK
• flutter_platform_widgets: Platform-adaptive widgets
• dots_indicator: Page indicator dots

Contributing 🤝

Contributions are welcome! Please feel free to submit a Pull Request.

License 📄

This project is licensed under the MIT License - see the LICENSE file for details.

Support 💬

If you encounter any problems or have suggestions, please file an issue at the GitHub repository.

---

Made with ❤️ by seifmoustafa