onboarding_builder #

A highly customizable Flutter package for building beautiful onboarding flows with multiple UI styles and extensive customization options.

Features #

• 3 Built-in Onboarding Types: Slide, Card, and Full-Screen styles
• Extensive Customization: Colors, gradients, images, fonts, and more
• Rich Animation Support: Smooth transitions with customizable curves and durations
• Gesture Support: Swipe navigation (full-screen type)
• Image Support: Asset images, network images, and custom image providers
• Theme System: Comprehensive theming with OnboardingTheme
• Progress Indicators: Dots, bars, and custom progress displays
• Skip Functionality: Optional skip button with customization
• Custom Builders: Override any component with custom widgets
• Material Design 3: Full compatibility with Material 3

Installation #

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

dependencies:
  onboarding_builder: ^0.1.0

Then run:

flutter pub get

Onboarding Types #

1. Slide Onboarding (Default) #

Classic slide-through experience with progress dots and smooth transitions.

2. Card Onboarding #

Elegant card-based layout with beautiful animations and modern design.

3. Full-Screen Onboarding #

Immersive full-screen experience with gradient backgrounds and swipe gestures.

Usage #

Basic Usage #

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

class OnboardingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final steps = [
      OnboardingStep(
        title: 'Welcome!',
        description: 'Welcome to our amazing app.',
        icon: Icon(Icons.waving_hand, size: 80, color: Colors.blue),
      ),
      OnboardingStep(
        title: 'Easy to Use',
        description: 'Our intuitive interface makes everything simple.',
        icon: Icon(Icons.touch_app, size: 80, color: Colors.green),
      ),
      OnboardingStep(
        title: 'Get Started',
        description: 'You are all set! Let\'s begin.',
        icon: Icon(Icons.rocket_launch, size: 80, color: Colors.purple),
      ),
    ];

    return OnboardingBuilder(
      type: OnboardingType.slide, // Choose your onboarding type
      steps: steps,
      onComplete: () {
        // Navigate to main app
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(builder: (context) => HomeScreen()),
        );
      },
    );
  }
}

Card Onboarding Example #

OnboardingBuilder(
  type: OnboardingType.card,
  steps: [
    OnboardingStep(
      title: 'Beautiful Cards',
      description: 'Experience elegant card-based onboarding.',
      icon: Icon(Icons.credit_card, size: 60, color: Colors.purple),
      backgroundGradient: LinearGradient(
        colors: [Colors.purple.shade100, Colors.blue.shade100],
      ),
    ),
    // ... more steps
  ],
  theme: OnboardingTheme(
    primaryColor: Colors.purple,
    buttonColor: Colors.purple,
    borderRadius: 16,
  ),
  onComplete: () => Navigator.pushReplacement(/* your route */),
)

Full-Screen Onboarding Example #

OnboardingBuilder(
  type: OnboardingType.fullScreen,
  steps: [
    OnboardingStep(
      title: 'Immersive Experience',
      description: 'Full-screen onboarding with beautiful gradients.',
      backgroundGradient: LinearGradient(
        colors: [Colors.orange.shade400, Colors.pink.shade400],
      ),
      icon: Icon(Icons.fullscreen, size: 80, color: Colors.white),
    ),
    // ... more steps
  ],
  theme: OnboardingTheme(
    titleStyle: TextStyle(fontSize: 32, color: Colors.white),
    descriptionStyle: TextStyle(fontSize: 18, color: Colors.white),
  ),
  enableSwipeGesture: true,
  onComplete: () => Navigator.pushReplacement(/* your route */),
)

Advanced Usage with Custom Controller #

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

class AdvancedOnboardingScreen extends StatefulWidget {
  @override
  _AdvancedOnboardingScreenState createState() => _AdvancedOnboardingScreenState();
}

class _AdvancedOnboardingScreenState extends State<AdvancedOnboardingScreen> {
  late OnboardingController _controller;

  @override
  void initState() {
    super.initState();
    _controller = OnboardingController(totalSteps: 3);
  }

  @override
  Widget build(BuildContext context) {
    final steps = [
      OnboardingStep(
        title: 'Step 1',
        description: 'This is the first step',
        backgroundColor: Colors.blue[100],
      ),
      OnboardingStep(
        title: 'Step 2',
        description: 'This is the second step',
        backgroundColor: Colors.green[100],
      ),
      OnboardingStep(
        title: 'Step 3',
        description: 'This is the final step',
        backgroundColor: Colors.purple[100],
      ),
    ];

    return OnboardingBuilder(
      steps: steps,
      controller: _controller,
      showProgressIndicator: true,
      progressIndicatorColor: Colors.blue,
      customNavigationBuilder: (context, controller) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            if (!controller.isFirstStep)
              ElevatedButton(
                onPressed: controller.previousStep,
                child: Text('Back'),
              ),
            ElevatedButton(
              onPressed: controller.isLastStep
                  ? () {
                      // Handle completion
                    }
                  : controller.nextStep,
              child: Text(controller.isLastStep ? 'Finish' : 'Continue'),
            ),
          ],
        );
      },
    );
  }
}

Advanced Customization #

Using Images #

OnboardingStep(
  title: 'Custom Images',
  description: 'Use asset images or network images.',
  imagePath: 'assets/images/welcome.png', // Asset image
  iconSize: 120,
  backgroundImagePath: 'assets/images/background.jpg',
  backgroundImageFit: BoxFit.cover,
)

// Or use ImageProvider
OnboardingStep(
  title: 'Network Image',
  description: 'Load images from network.',
  imageProvider: NetworkImage('https://example.com/image.png'),
  backgroundImageProvider: NetworkImage('https://example.com/bg.jpg'),
)

Custom Styling #

OnboardingStep(
  title: 'Custom Style',
  description: 'Fully customizable styling options.',
  titleColor: Colors.blue,
  descriptionColor: Colors.grey,
  backgroundColor: Colors.white,
  backgroundGradient: LinearGradient(
    colors: [Colors.blue.shade100, Colors.purple.shade100],
  ),
  borderRadius: 20,
  padding: EdgeInsets.all(32),
  spacing: 24, // Space between elements
)

OnboardingTheme #

Global theming for consistent styling across all steps.

OnboardingTheme(
  primaryColor: Colors.blue,
  secondaryColor: Colors.grey,
  backgroundColor: Colors.white,
  textColor: Colors.black,
  buttonColor: Colors.blue,
  buttonTextColor: Colors.white,
  progressIndicatorColor: Colors.blue,
  skipButtonColor: Colors.grey,
  titleStyle: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
  descriptionStyle: TextStyle(fontSize: 16, height: 1.5),
  buttonTextStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
  borderRadius: 12,
  padding: EdgeInsets.all(24),
  margin: EdgeInsets.all(16),
)

API Reference #

OnboardingBuilder #

The main widget for creating onboarding flows.

Properties

• steps (required): List of OnboardingStep objects
• type: Onboarding type (OnboardingType.slide, card, or fullScreen)
• theme: Global theme configuration (OnboardingTheme)
• controller: Optional OnboardingController for custom control
• onComplete: Callback when onboarding is completed
• customStepBuilder: Custom builder for step content
• customNavigationBuilder: Custom builder for navigation controls
• padding: Padding around the content (default: EdgeInsets.all(24.0))
• showProgressIndicator: Whether to show progress indicator (default: true)
• showSkipButton: Whether to show skip button (default: true)
• animationDuration: Duration for animations (default: 300ms)
• animationCurve: Animation curve (default: Curves.easeInOut)
• cardElevation: Card elevation for card type (default: 8.0)
• cardBorderRadius: Card border radius for card type (default: 16.0)
• enableSwipeGesture: Enable swipe navigation for full-screen type (default: true)
• backgroundWidget: Custom background widget for full-screen type

OnboardingStep #

Represents a single step in the onboarding flow.

Properties

Content

• title (required): Step title
• description (required): Step description
• customContent: Override default content with custom widget

Icons & Images

• icon: Custom icon widget
• imagePath: Asset image path
• imageProvider: Custom image provider
• iconSize: Size of icon/image (default: 80)
• iconColor: Color of icon

Background

• backgroundColor: Background color
• backgroundGradient: Background gradient
• backgroundImagePath: Background image asset path
• backgroundImageProvider: Background image provider
• backgroundImageFit: How background image fits (default: BoxFit.cover)

Styling

• titleStyle: Custom title text style
• descriptionStyle: Custom description text style
• titleColor: Title text color
• descriptionColor: Description text color
• padding: Content padding
• margin: Content margin
• borderRadius: Border radius
• border: Custom border
• boxShadow: Custom box shadow

Layout

• mainAxisAlignment: Vertical alignment (default: MainAxisAlignment.center)
• crossAxisAlignment: Horizontal alignment (default: CrossAxisAlignment.center)
• spacing: Space between elements (default: 16.0)

OnboardingController #

Controller for managing onboarding state.

Properties

• currentIndex: Current step index
• totalSteps: Total number of steps
• isFirstStep: Whether currently on the first step
• isLastStep: Whether currently on the last step
• progress: Progress as a value between 0.0 and 1.0

Methods

• nextStep(): Move to next step
• previousStep(): Move to previous step
• goToStep(int index): Jump to specific step
• reset(): Reset to first step

OnboardingType #

Enum defining the onboarding UI style.

• OnboardingType.slide: Classic slide onboarding with dots
• OnboardingType.card: Card-based onboarding with animations
• OnboardingType.fullScreen: Full-screen immersive onboarding

Example #

Check out the example directory for a complete working example.

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.