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