Flutter OnBoarding Package 🚀

A beautiful, customizable, and easy-to-use onboarding package for Flutter applications with smooth animations and gradient transitions.

✨ Features

  • 🎨 Animated Gradient Button: Smooth color transitions based on page progress
  • 📱 Responsive Design: Works perfectly on all screen sizes
  • 🔄 Smooth Page Transitions: Beautiful animations between pages
  • 🎯 Customizable: Easy to customize colors, texts, and images
  • 📦 Lightweight: Minimal dependencies
  • 🌍 RTL Support: Full support for right-to-left languages

📸 Screenshots

Add your screenshots here

🎯 Getting Started

Installation

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

dependencies:
  flutter_onboarding_package:
    path: ../flutter_onboarding_package

Then run:

flutter pub get

📖 Usage

Basic Example

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: OnboardingScreen(
        pages: [
          OnboardingPage(
            imageUrl: 'assets/images/onboarding1.png',
            title: 'Welcome',
            subtitle: 'Discover amazing features',
          ),
          OnboardingPage(
            imageUrl: 'assets/images/onboarding2.png',
            title: 'Easy to Use',
            subtitle: 'Simple and intuitive interface',
          ),
          OnboardingPage(
            imageUrl: 'assets/images/onboarding3.png',
            title: 'Get Started',
            subtitle: 'Start your journey today',
          ),
        ],
        onFinish: () {
          // Navigate to your home screen
          Navigator.pushReplacementNamed(context, '/home');
        },
        primaryColor: Color(0xFF1D3A4B),
        secondaryColor: Color(0xFF56AEBF),
        nextButtonText: 'Next',
        finishButtonText: 'Get Started',
      ),
    );
  }
}

Advanced Customization

OnboardingScreen(
  pages: yourPages,
  onFinish: () => Navigator.pushReplacementNamed(context, '/home'),
  
  // Colors
  primaryColor: Colors.blue,
  secondaryColor: Colors.cyan,
  dotActiveColor: Colors.blue,
  dotInactiveColor: Colors.grey,
  
  // Texts
  nextButtonText: 'Next',
  finishButtonText: 'Start Now',
  
  // Styling
  titleTextStyle: TextStyle(
    fontSize: 36,
    fontWeight: FontWeight.bold,
  ),
  subtitleTextStyle: TextStyle(
    fontSize: 20,
    color: Colors.grey,
  ),
  
  // Animation
  animationDuration: Duration(milliseconds: 300),
)

🎨 Customization Options

Parameter Type Description Default
pages List<OnboardingPage> List of onboarding pages Required
onFinish VoidCallback Callback when finish button is pressed Required
primaryColor Color Primary gradient color Color(0xFF1D3A4B)
secondaryColor Color Secondary gradient color Color(0xFF56AEBF)
nextButtonText String Text for next button 'Next'
finishButtonText String Text for finish button 'Get Started'
dotActiveColor Color Active dot indicator color secondaryColor
dotInactiveColor Color Inactive dot indicator color Color(0xFFE6E6E6)
titleTextStyle TextStyle? Custom style for titles null
subtitleTextStyle TextStyle? Custom style for subtitles null
animationDuration Duration Page transition duration Duration(milliseconds: 300)

📝 OnboardingPage Model

OnboardingPage({
  required String imageUrl,    // Path to your image asset
  required String title,        // Page title
  required String subtitle,     // Page subtitle
})

🎯 How It Works

  1. Page Indicator Dots: Automatically generated based on the number of pages
  2. Gradient Animation: The button gradient smoothly transitions as you swipe between pages
  3. Auto-detection: Automatically shows "Next" or "Finish" button based on current page
  4. Smooth Animations: Uses AnimatedBuilder for smooth gradient transitions

🔧 Requirements

  • Flutter SDK: >=3.0.0
  • Dart SDK: >=3.0.0

📦 Dependencies

  • animate_do: For smooth fade-in animations

🤝 Contributing

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

📄 License

This project is licensed under the MIT License.

👨‍💻 Author

Created with ❤️ by Dev Abdo Shamss

🐛 Issues

If you encounter any issues, please file them in the issue tracker.

Libraries

flutter_onboarding_package
Flutter OnBoarding Package